I am just wondering why I need to add double curly braces for ng-href while some of the other directives don't need them?
<a ng-href="{{myScopeVar}}" ng-if="myScopeVar">link</a>
Notice that ng-href needs braces while ng-if doesn't.
I am not quite sure about your question. But i think your are wondering why there are different syntax styles in angular directives. First off all, please have a look at this post: Difference between double and single curly brace in angular JS? The answer explains the difference between {{}}, {} and no braces.
For your concrete examples, as in the documentation stated: ng-href requires a template (any string which can contain {{}} markup), while ng-if requires an expression - e.g. you may not write {{}}, because angular evaluates it.
If you have a look at the angular sources you will see, that ng-href uses attr.$observe while ng-if uses the $scope.$watch function. $observe is caled on every change of the attribute value. $watch is called, when the expression results to a new value.
But why these two different ways? I think one point is easier usage and code readability. Right now you can write:
<a ng-href="http://yourdomain.com/users/{{userId}}/post/{{postId}}">title</a>
As you can see, you only write an expression for dynamically inserted userId and postId values. If ng-href would also use the $watch function we had to write (don't do this because it wil not work - it only demonstrates the difference):
<a ng-href="'http://yourdomain.com/users/'+userId+'/post'+postId">title</a>
Even if Iuse ng-href data-ng-href it throws error for validation.
I used <link rel="stylesheet" data-ng-href="{{datas}}" href="/"> in order to pass validating error.
Hope it will helps someone
Related
I've started to work with dotansimha/angularjs-dropdown-multiselect directive. In the examples he shows the directive is being called out with an equals symbol followed by a undefined double quoted string as shown below.
<div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" extra-settings="example13settings"></div>
My question what is the equals and undefined quotes used for in this example? Is this a way to isolate several of these controls on one page, pass parameters to the directive or does it not serve any purpose and is only a matter of coder style?
You can use this syntax to pass parameters to the directive, and it has some interesting uses. You can read more about it here.
In this particular directive's case, however, it doesn't seem to be doing anything,the documentation for angularjs-dropdown-multiselect does not address it. Given that the attribute parameters could still be accessed if ="" wasn't present, it can be considered style or unnecessary code, perhaps a leftover from a past implementation.
Is there any case when I don't need an ngCloak directive?
It seems that every tag that somehow uses Angular library needs to define this directive either via ng-cloak attribute or class="ng-cloak".
Is there any downside of using this directive for every possible element?
ng-cloak will cause your element not to render straight away. Often elements will look fine without ng-cloak, in which case it would be strange to opt for a blank space.
This will often be the case if you are not using the {{x}} syntax. Perhaps you could use ng-bind instead.
Lots of elements will not be in the DOM at page load. For example, the template of a directive will obviously not be available until after the digest cycle has already run. It would be strange to try to cloak something which was not visible in the first place.
Using ng-cloak more than you need to will just hurt performance.
I am developing a custom directive and now I need to handle ng-if. This is easy enough when ng-if is on the directive it self. However when ng-if is on an enclosing container element my compile function fails with run time errors.
Question is: what is the best and most efficient way to know, inside the compile function of a directive, that the directive is enclosed within a container with ng-if is false OR an expression that evaluates to false.
For example:
<div ng-if="false">
<my-directive></my-directive>
</div>
And another example:
<div ng-if="somescopeValue > 300">
<my-directive></my-directive>
</div>
Maybe the answer is using jquery to traverse the dom and find a parent with
an ng-if attribute but I was wondering if there is another more "angular" way of doing this.
Your directive shouldn't rely on knowing whether it is encapsulated in a ng-if expression. That breaks the principle of 'Separation of Concerns' and deteriorates code re-use. Consider redesigning your custom directive in such a way that it needs not be aware of its host elements, in the same fashion that all components (should) work.
If you are using same scope as parent controller or directive then you are able to access same variable in your directive(here my-directive) also. If this is not a case then you need to write code to access parent element in link function of my-directive. You will get directive element in link function as a parameter.
I'm not sure how the error happens, because when your directive is inside ng-if="false", your directive won't get called at all - all compile, link and controller function in the directive will only run as soon as your directive gets added in DOM.
Perhaps your error can be solved by initializing something in case your directive is not added.
I am confused about when to use expressions and when not to use inside default AngularJS directives such as ng-src, ng-href and other.
According to my understanding when we use angular directive we have just use scope variable names to bind it's value. Following expression work properly.
<link ng-href="{{BASIC_PATH + '/relative-path-url/image.png'}}"/>
But consider an case of ng-model directive, following example is not valid way to bind variables.
<span ng-model="{{BASIC_PATH}}"></span>
Every time when I have to use angular expressions with directives, I used to write code in both format and then test.
So what is the basic fundamental way to use expressions with angular directives.
Using the {{ }} tells Angular to evaluate the variable and pass its value to the directive.
So if your controller contains the line:
$scope.myVar = "test";
Then this line:
<input ng-model="{{myVar}}">
Would basically be compiled to:
<input ng-model="'test'">
Therefore, the way to remember which convention you should use, is to ask yourself if the directive wants the variable itself, or the value of the variable.
What is the difference between these two (why is one in {{}} and one in "")?
<body ng-controller="StoreController as store">
<img ng-src="{{store.product.images[0]}}" />
Oh, I think I see it now. The Store controller as store is a function, and the store.product.images[0] is a string, right?
So why is the ng-controller directive different? Well, it's just down to how the directives (the ng-xxx bit) are written. It's possibly a bit in-depth for this answer, but it would be worth looking at how to create custom directives (see https://docs.angularjs.org/guide/directive), and how you can pass data parameters to them.
The difference comes down to how the ng-controller and ng-src directives expect their parameters.
When something is between {{}}, you can think of it as identifying to Angular that this attribute value needs to be interpolated before it is passed to the directive. Interpolation is a form of compiling placeholders in a string, and it is a string that ng-src is expecting to be passed. So to give it the string value for a product image, it needs to use the {{}}.
So in your example, {{store.product.images[0]}} may be interpolated (think text replacement) to something like "\content\image1.jpg".
ng-controller will take care of parsing the value StoreController as store by itself, it's a syntax that only it knows about. As such, it just wants to read the attribute value as it is, with no preprocessing/interpolation.
I've simplified that a bit, but you can always check out more at https://docs.angularjs.org/api/ng/service/$interpolate for a bit more detail.
I hope that makes sense and I haven't confused the issue.