I have the following piece of code -
<div class="appReviewQuestions">
{{aboutYou.radioSelectSQ}}
</div>
The expression {{aboutYou.radioSelectSQ}} initially represented a String but my application was updated and now the same expression represents String + markup(HTML).
Currently this piece of code shows the markup as a string. I want that Angular should read the markup and not display it as a string. How do I achieve this?
ng-bind-html should do the trick!
<div class="appReviewQuestions">
<p ng-bind-html="aboutYou.radioSelectSQ"></p>
</div>
Read more about it at the Angular Docs
Related
Actually I'm confused between when to use {{ }} when using angular directives and when to not to use {{ }}
For example:
<div data-ng-init="isHidden=false">
<div data-ng-show="isHidden">
...
</div>
</div>
and
<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
...
</div>
</div>
I'm confused between these syntax ? What are the differences between those? And when to use what? Thanks in advance :)
There is no difference except the "look" u need to use the {{value}} syntax in case you want to write data anywhere in your html body
<div>{{value}}</div>
It's all explained here: Difference between double and single curly brace in angular JS?
For quick answer:
{{}} are Angular expressions and come quite handy when you wish to
write stuff to HTML
Don't use these at a place that is already an expression!
For instance, the directive ngClick treats anything written in between
the quotes as an expression
<div data-ng-init="isHidden=false">
<div data-ng-show="isHidden">
...
</div>
</div>
In This Situation data-ng-show = false , Takes From data-ng-init As Statically,if You Have Given true Then It Returns True .
But Here
<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
...
</div>
{{}} Called As Expressions In Angular One Of The Most Important Concept
It Directly Evaluate If isHidden = true Or False Based On Any Condition Written In Your App.js File .
Example:
<div data-ng-init="isHidden=YourVariable">
<div data-ng-show="{{isHidden}}">
...
</div>
if(YourVariable == true){
Do Somthing
}
else{
Do Something
}
If you are asking when to use {{}} while assigning value to a attribute and when not.
It depends on the binding types of directive. '#' or '='
So here, you have to use:
data-ng-show="{{isHidden}}" if the binding type of directive scope data-ng-show is '#', that mean the data-ng-show will be expecting a string value. So in this case if you keep data-ng-show="isHidden" it will take data-ng-show's value as 'isHidden', but data-ng-show="{{isHidden}}" will take the value of the $scope.isHidden and assign to data-ng-show.
Now if the binding type of directive scope data-ng-show is '=', that means the data-ng-show will be expecting a value from a scope. So data-ng-show="isHidden" itself will take the value of he $scope.isHidden and assign to data-ng-show.
Note: all the default HTML attributes expect a string so you have to use {{}} for default HTML attributes.
There is no as such major difference unless one uses them in the DOM for the value.
When one uses the following:
<div data-ng-show="isHidden">
then, expression is evaluated and on the basis of it respective value, the ng-show either hides or displays the div. But the value of the isHidden cannot be seen, when one inspects the HTML using the browser developer tool.
When one uses the following:
<div data-ng-show="{{isHidden}}">
In this case, the value of the isHidden can be seen from the developer tools, and the rest of the expression does evaluates the same as that of (1).
I have a conditional print requirement in Angular and Bootstrap environment. The requirement is to print a div when the condition exists.
On the HTML code:
<div class="print" ng-show="objects[0].exists">
///My print Part
</div>
On the LESS code:
>.print{
.visible-print-block;
}
What's happening in my case is .visible-print-block is overriding the Angular condition and printing the div irrespectively of the condition.
You want to use the ng-class directive
So your coude would look like:
<div ng-class= '{"print": objects[0].exists}'>
///My print Part
</div>
Using this solution the class 'print' will only be applied if the result of objects[0].exists is true.
I'm inside my view.xthml which has facelets component in there. Like:
<ui:composition template="/layout.xhtml"> .. whatever
Being there I try to integrate AngualerJS, putting ng-view, like this:
<div ng-view> </div>
When my /view.jsf is rendering I got server side error:
Attribute name "ng-view" associated with an element type "div" must be followed by the ' = ' character.
So, it validates my html that prevents angular ng-view to start working.
The question is: how to integrate angularjs and its ng-view with jsf/facelets based on my case?
Facelets is a XML based view technology which uses XHTML to generate HTML output. In XML, each element attribute must have a value.
You can indeed assign it an empty string as value, but ng-view="true" or ng-view="ng-view" would be more self-documenting, keeping checked="checked" and selected="selected" in mind.
<div ng-view="true">
<div ng-view = "">
Looks not nice but it works for me on that stage (of getting rid of jsf).
I've tried to read the documentation on ng-include with no luck thus far. All I want to do is have the ng-include evaluate the path of where the template/partial is and load the contents:
<div data-ng-include src="'{{pageData.src}}'"></div>
I can see pageData.src is returning "tpl/page.html" in the console. I've tried the following variations:
<div data-ng-include src="{{pageData.src}}"></div>
<div data-ng-include src='{{pageData.src}}'></div>
<div data-ng-include src={{pageData.src}}></div>
None of them seem to evaluate the expression. I receive the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.9/$parse/syntax?p0=pageData.src&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BpageData.src%7D%7D&p4=pageData.src%7D%7D
Feedback is much appreciated!
In ng-include src takes a javascript expression so in your case the following should work:
<div data-ng-include src="pageData.src"></div>
when you see it like this
<div data-ng-include src="'templates/myTemplate.html'"></div>
the extra single quote inside the double quotes is a javascript expression in this example a string literal.
when you see {{}} this is for directives that do not take javascript expressions but just a string. For example ng-href takes a string. That string can be the result of a js expression which should be enclosed on {{}} e.g.
<a ng-href="{{pageData.src}}/myImage.jpg">Go</a>
Finally to mention something that confused me which was when there is an expression with single curlies {}. e.g.
<a ng-class="{'active': item.active, 'locked': item.disabled}">Go</a>
in this case this is a js map expression and the ng-class takes the name that has a value the evaluates to true. So if in the above item.active evaluates to true then 'active' will be added as a class.
Try this:-
<div data-ng-include="pageData.src"></div>
If you can post a jsFiddle, it would be easy for me to see the exact problem.
What's the best way to decode HTML that is contained in strings passed to an Angular expression?
Example:
If I have a string returned from the server like this:
var some_val = "Hello <strong>World</strong>!"
How can I have it render the HTML rather than display it as text?
<!-- Renders to Hello <strong>World</strong>! -->
<span>{{ some_val }}</span>
Update: Here's actual use case in a repeater:
Works (unsanitized)
<div ng-repeat="category in some_list">
<p>{{ category.name }}</p>
<p ng-repeat="bullet in category.bullets">{{ bullet.desc }}</p>
</div>
Doesn't work at all
<div ng-repeat="category in some_list">
<p ng-bind-html="category.name"></p>
<p ng-repeat="bullet in category.bullets" ng-bind-html="bullet.desc"></p>
</div>
As described here, in the docs:
<span ng-bind-html="some_val"></span>
Remember that some_val must be a angular model (basically, a $scope.some_val must exist somewhere in your app)
EDIT:
I should clarify: ng-bind-html is a service in the module ngSanitize, which isn't included in the angularJS core. ng-bind-html-unsafe is part of the core ng module, but it includes the string you supply it without sanitizing it (see the example in the ngBindHtmlUnsafe docs).
If you want/need to use ngBindHtml, you need to include ngSanitize - available here