ANGULARJS directive-binding policy (@, =, &)

ANGULARJS directive-binding policy (@, =, &)

Introduce the theme: the template in angular's instruction configuration can write code directly using hard-coded, but it can also be dynamically updated according to the variables. Then you need to use those variables, because of the different usage, so you need to set the appropriate binding policy.

One, @ Binding policy

The @ binding strategy, which functions as the value of the variable under the independent scope that can be configured with the directive is equal to the value of the directive attribute based on the @ binding. (The value of an instruction property can use an expression, but the value must be a string.) ）

1, on the code:

HTML code

2. <!DOCTYPE html>
4. lang="en"ng-app="myApp">
8. <metacharset="UTF-8">
10. <title>myDirective</title>
14. <body>
16. <inputtype="text"ng-model="myUrl">
18. <divmy-directivemy-url="{{myUrl}}"my-link-text="click me"></div> ①
22. </body>
24. <scriptsrc="../../common/angular-1.0.1.min.js"></script>
26. <scriptsrc="./demo1.js"></script>

JS Code

2. angular.module(‘myApp‘,[])
4. .directive(‘myDirective‘,function(){
6. return{
8. restrict:‘A‘,//属性方式
10. replace:true,
12. scope:{
14. myUrl:‘@‘,//@绑定策略(默认绑定到 my-url指令属性)
16. myLinkText:‘@‘//@绑定策略(默认绑定到 my-link-text 指令属性)
18. },
20. template:‘<a href="{{myUrl}}">{{ myLinkText }}</a>‘
22. }
24. });

2. Explanation:

• In the above code, I created a directive myDirective that creates two variables Myurl, myLinkText, and both of these variables are used @绑定策略 .

• To say, whether or not the @ = & binding policy, they all have a default way, with the @ binding policy as an example, as in the above code: myUrl:‘@‘ , directly in a @ way to represent the binding, It defaults to assigning the value of the directive attribute My-url to the Myurl variable. Of course, you do not want to use the default way, that is, you do not want to myurl the value of the variable binding my-url, and you want to bind the value of other property names, then you can @ add the property name you want (the format requirement: Camel style). For example, I want to talk about the value of Myurl bound to the <myDirective></myDirective> Some-attr property of the directive, then you can write: myUrl:‘@someAttr‘ .

• So we know how the value of the Myurl variable of the instruction is coming, so how do we use it in the template? This is very simple, see the above code can be very clear, we in the code in the template need to use an expression to reference it {{myUrl}} , so that we can use the value of the Myurl variable ~

3, Summary:

• The @ Binding policy can only be bound (or understood to be passed) as a string value. If you want to pass a method (&) or implement two-way data binding (=), you need to use the other two-way binding.

Tutorials for @, =, & Explanation:
To make the new instruction scope accessible to variables in the current local scope, you need to use one of the following three aliases.
1. Local Scope properties: Use the @ symbol to bind the local scope to the value of the DOM property. Internal scopes for directives can use variables from external scopes:
　　@ (or @attr)
Now, you can use the bound string in the instruction.

2. Two-way binding: by = You can make two-way data binding on properties on a local scope's property at the half-level scope. Just like normal data binding, local properties reflect changes that occur in the parent data model.
　　= (or =attr)

3. Parent scope bindings You can bind a parent scope by using the & symbol to run the function in. means that setting this value generates a wrapper function that points to the parent scope.
To invoke a parent method with a parameter, we need to pass an object that is the name of the parameter, and the value is the content to pass to the parameter.
　　& (or &attr)

From for notes (Wiz)

ANGULARJS directive-binding policy (@, =, &)