Home > Web Front-end > JS Tutorial > body text

Analysis of binding strategy examples in AngularJS directives

高洛峰
Release: 2016-12-24 09:51:25
Original
1040 people have browsed it

The examples in this article describe the binding strategy in AngularJS directives. Share it with everyone for your reference, the details are as follows:

In the previous article, we know how the instruction generates an independent scope. In this section, we will take a closer look at the binding strategy in the scope.

In general, scope binding strategies are divided into 3 types:

(1)@: binding string

(2)=: two-way binding with the parent controller

(3)&: used Call the function in the parent scope

1. Basic method

<test word="{{wordCtrl}}"></test>
Copy after login

app.controller(&#39;myController1&#39;,[&#39;$scope&#39;,function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});
Copy after login

Display effect:

Analysis of binding strategy examples in AngularJS directives

This is the most basic method, which realizes the binding of strings in the scope

2. In fact, We can implement the above method by rewriting

app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      word:&#39;@&#39;
     },
     template:"<div>{{word}}</div>",
    }
});
Copy after login

By deleting the link function and adding @binding, we can successfully achieve string binding between the attributes in the instruction and the instruction scope.

3. ‘=’ binding

If you use = binding, you can not only change the value in the scope of the instruction, but also change the value in the parent controller to achieve two-way binding.

Example:

ctrl:
<test word="{{wordCtrl}}"></test>
Copy after login

app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      word:&#39;@&#39;
     },
     template:"directive:<input ng-model=&#39;word&#39; />",
    }
});
Copy after login


The effect is that when changing the value of the scope in the instruction, it will also change the value of the corresponding variable in the controller, realizing the two-way connection between the controller and the scope in the instruction. Binding.

The effect is as follows:

Analysis of binding strategy examples in AngularJS directives

3. ‘&’ method

<test greet="sayHello()"></test>
Copy after login


app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      greet:&#39;&&#39;
     },
     template:"<div ng-click=&#39;sayHello({name:&#39;yuxiaoliang&#39;})&#39;>点击说HELLO</div>",
    }
});
Copy after login

Pay attention to the method of passing parameters.

I hope this article will be helpful to everyone in AngularJS programming.

For more related articles on the analysis of binding strategy examples in AngularJS instructions, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template