We have statement like:
{{~#if someCondition ~}}
<div class="whyweneedtildehere"></div>
{{~/if~}}
What is the difference between simple if statement and if statement with "~" in handlebars templates?
It is called a tilde, which might help you google it further.
The Handlebars docs answers your question in detail.
Template whitespace may be omitted from either side of any mustache
statement by adding a ~ character by the braces. When applied all
whitespace on that side will be removed up to the first handlebars
expression or non-whitespace character on that side.
Here are some examples that might help you understand what ~ does.
In .js:
{
hello: 'Hello, World!',
}
Example #1:
.hbs
<div>
{{hello}}
</div>
.html
<div>
Hello, World!
</div>
Example #2:
.hbs
<div>
{{~hello}}
</div>
.html
<div>Hello, World!
</div>
Example #3:
.hbs
<div>
{{~hello~}}
</div>
.html
<div>Hello, World!</div>
Basically, it's for removing whitespaces in the output HTML.
Related
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
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'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.
I quite like how angular-ui has created ui-routes, which provides named routes (among other things).
Though likely a simple directive to write—a wrapper for ui-view—I am not sure if it is best practice.
<div ui-view2="foo.html" class="span12">
Foo haz bar
</div>
With the following logic:
if `foo.html` is file: contents of foo.html
elif `$scope.foo.html` exists: contents of `$scope.foo.html`
else: contents defined in view, i.e.: "Foo haz bar"
What do you think, would this kind of setup be within the realms of best-practice?
BTW: Is there anything like this already?
You can use ng-switch
<div ng-switch="page_name">
<div ng-switch-when="foo" ng-include="'partials/foo.html.html'">
<div ng-switch-when="bar" ng-include="'partials/bar.html.html'">
</div>
You can also use ng-if if your logic doesn't fit into a ng-switch:
<div ng-if="first_condition">something</div>
<div ng-if="!first_condition && second_condition">something else</div>