How to convert html to plain text in angularjs controller? - angularjs

I am using ng-bind-html (with ngSanitize module) to display html as plain text in view. It is tied to the scope variable partyinfo.
<div class="panel panel-primary" ng-bind-html="partyinfo" contenteditable="false"></div>
How can I look at the same scope variable and convert to plain text on the controller side? Is there an equivalent way of doing ng-bind-html on controller side?
Thanks for any help.

I am not sure to understand your question but you could try with $sanitize service:
$sce.trustAsHtml($scope.partyInfo);

Related

angular directive ng-if in angular-translate translation string not working

I'm using angularjs with angular-translate v2.6. I've got a translation that includes a ng-if directive. I've observed that the ng-if is ignored within the text.
I see angular-translate includes translate-compile but adding this declaration to the html like so has no effect:
'Interest.Explanation': 'This is called <a translate-compile
ng-show="interestEnabled"
href="/{{id}}/interest">interest</a>
<span translate-compile
ng-hide="interestEnabled">interest</span>.'
Used in html like so
Any ideas? I'm really scratching my head on this one. (I'm also using ngSanitize if that makes a difference?)
Looks like I had translate-compile inside the wrong tag. Should be on the parent translate tag, not in the string itself.
<p><span translate-compile translate='Interest.Explanation' translate-values={...}</span></p>

Special character display along with their name in md-select

I have md-select with the values from the database. The value having a name with special characters. I am using angularjs material.
Example: In database: Sathya & ram,
It displays like: Sathya &amp ram in md-option.
How can I resolve this?
You could wrap the value into a div with the directive ng-bind-html like this:
<div ng-bind-html="$ctrl.name"></div>
This directive evaluated Html, so use with care
Docs for ngBindHtml
EDIT
I think you could also assign the directive to md-option directly.

how to use controller scope variable in template view in angularjs?

I have scope variable in angularjs controller, let's say :-
$scope.newlangSuffix = 'en';
And i am trying to include a php file in template using this scope variable :-
<div ng-include="'/catalogfilterhtml_{{newlangSuffix}}.php'"></div>
but unable to do that. how can i achieve this thing?
<div ng-include="'/catalogfilterhtml_{{newlangSuffix}}.php'"></div>
That's incorrect. ng-include expects an angular expression. And '/catalogfilterhtml_{{newlangSuffix}}.php' is not a valid one, because angular expressions can't contain double mustaches.
A correct one would be
<div ng-include="'/catalogfilterhtml_' + newlangSuffix + '.php'"></div>
You should type it like this:
<div ng-include ="'/catalogfilterhtml_'+newlangSuffix+'.php'"></div>

AngularJS rendering different template inside ng-repeat using ng-view

I would like to apologize that I couldn't provide any code snippet regarding this question, I am a newbie about AngularJS.
<div ng-repeat="item in list" ng-view></div>
Using the code above, would it be possible to render different template which would be dependent on item.type property. I was expecting a result like this:
item.type == "image" returning: <div><img src="'IMAGE_URI'"></div>
item.type == "text" returning: <div><p>TEXT</p></div>
As of now I have create a template html for the enumeration of item.type. Is this concern possible using AngularJS? I've recently learned that ng-view accompannied with ng-route.
I think one way you can do it is to use 'ng-if' to conditionally include html:
<div ng-repeat="item in list">
<div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
<div ng-if="item.type == 'text'><div><p>TEXT</p></div>
</div>
You can have only one ng-view,
take a look at this answer.
from the documentation for ng-view:
ngView is a directive that complements
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.
Every time the current route changes,
the included view changes with it according
to the configuration of the $route service.
Requires the ngRoute module to be installed.
What you're looking for is ng-include, combined with ng-switch,
take a look at this answer on how to combine the two.
ng-include creates a new child scope, which in turn inherits from the controller.
have a look at this answer for more information about the topic.

in angularJS, how to render model containing markup as markup (unescaped)

Im trying to make a markdown editor with preview via angular filter calling showdown
<textarea ng-model="data.text"></textarea>
<div class="preview">{{data.text|markdown}}</div>
I managed to convert markdown markup on the fly into html but when rendered the actual output on the screen is like this :
<h1 id="thisisaheader">This is a header</h1>
It looks like the resulting markup is escaped. how do i render it unescaped?
You need to use ng-bind-html-unsafe:
<div class="preview" ng-bind-html-unsafe="data.text|markdown"></div>
It's up to you to guarantee that the content is trustful.
If you happen to be using Angular 1.2 RC1, then you should use ng-bind-html along with the new Strict Contextual Escaping service ($sce for short).

Resources