Angular HTML Expressions

Question

I am learning angular js and have now a question where I couldn't find the right answer yet.

in the template HTML, you can use expressions to show the scope variables or call scope functions. But I see all the time different versions of it.

{{name}} shows the variable and binds it

{{::name}} the same thing but without binding

userdirective="{{::key}}" But what is the difference here?

ng-if="::field.sortable" With ng-if they are not using {{ but with there userdirective they do?

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" And then there is the last one with just one {. Thats when you create an object.right?

Maybe someone can help me to understand all of it. Thank you very much for your time. Pat

I think this article could be a good starting point on explaining these: moduscreate.com/the-magic-of-angular-js-two-way-binding — thepio
– thepio, Commented Sep 1, 2016 at 9:06
Official documentation for AngularJs docs.angularjs.org/guide/expression — Mohit Tanwani
– Mohit Tanwani, Commented Sep 1, 2016 at 9:09

Daniel · Accepted Answer · 2016-09-01 09:18:25Z

3

{{name}} as you say is two-way data-binding

{{::name}} one way databinding

userdirective="{{::key}}" is the interesting case. This statement uses one-way binding into the userdirective ... which means after the $digest it just says userdirective="someValue"

So the userdirective gets that value as a plain value. Now I would have to test it but in the scopepart of the directiive it should say @ so it gets read as a string and not as a expression.

The last one is simply as any JSON you build

{ name: value?true:false }

setting value according to conditions that angular evaluates, with a bit of magic involved :D

hope that helps

answered Sep 1, 2016 at 9:18

Daniel

6192 gold badges7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick Over a year ago

thanks for the explanation. but i still have one question: there is for example userdirective="{{test}}" but i see also something like ng-if="test". does that mean that i actually dont need the {{ to pass a variable or object to a directive?

Daniel Over a year ago

sorry for the late answer... the answer is yes. ... ng-if expects a expressions in this case test ...if test true ...you get the idea.

Kunso Solutions · Accepted Answer · 2016-09-01 09:24:45Z

{{ anything here}} - That is angular expression interpolation. Angular interpolation - here you can find more about that. Basically idea that it interpolate anything you will put inside those brackets. So if you will put expression with some calculations or just variables related to current scope it will convert all variables to their values and apply calculations.

For instance: {{scopevar1 + scopevar2}} in case this variables has some values, let it be 1 and 2, as result we will see 3.

:: - This mean one time binding. For instance {{::scopevar1}} it will be interpolated once and will not check for changes of scopevar1, always stay as first value. Even if scopevar1 will change every second, the value in template will be the same. Angular Expressions - here you can find some live examples and more information.

userdirective="{{::key}}" - This case is nothing more then assigning dynamic value to your directive. UserDirective expectes to get a simple value, but we have it inside our scope, so we need to say: Hey, angular please interpolate scope variable - key, but only once, so my directive will get value, and will not looking for updates of key. And angular does it with pleasure!

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" The last case is when your directive expects to get some kind of specific JSON. And we don't want to build it inside of controller. It is sometimes easier to do such things in the tempalte. So we put specific object with two properties: condition, mdColors. And saying that first property assigned to result of function, and second one is simple object {color:'primary'}.

That's it!

crystalthinker · Accepted Answer · 2016-09-01 09:25:01Z

1

{{var}} is a two way binding expression and {{::var}} is a one-way binding expression. expression with :: will not change once set, it is a candidate for one-time binding. go through : https://docs.angularjs.org/guide/expression for better examples on these

answered Sep 1, 2016 at 9:25

crystalthinker

1,19216 silver badges32 bronze badges

Comments

PerfectPixel · Accepted Answer · 2016-09-01 09:29:15Z

{{name}} is the regular case you will find. You basically print the variable name and update it once it changes.

{{::name}} is the same but your value will not receive updates once it stabilises.

So in the first case, your template updates once name is changed. In the latter, it isn't.

userdirective="{{::key}}" is a one-way one-time binding. Leave the :: out and your directive receives updates if key changes. However, if the directive changes key, it will not update the parent.

ng-if="::field.sortable" is a two-way binding. The changes go both ways. In this case, field.sortable is watched by the directive.

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" is used when you want to build adhoc-objects. A popular case is ng-class as well. You may build this object in the controller as well as you should not put too much logic in your template.

In any case, it is advisable to read the excellent docs https://docs.angularjs.org/guide

Collectives™ on Stack Overflow

Angular HTML Expressions

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related