An instance analysis of binding policy in ANGULARJS instruction _angularjs

The example in this article describes the binding policy in the ANGULARJS directive. Share to everyone for your reference, specific as follows:

In the previous article, we learned how directives generate independent scope, and in this section we examine the binding policies in scope.

Overall, the scope binding strategy is divided into 3 categories:

(1) @: Binding string

(2) =: Bidirectional binding to Parent controller

(3): Used to invoke a function in the parent scope

1. Basic approach

<test word= ' {Wordctrl}} ' ></test>

App.controller (' MyController1 ', [' $scope ', function ($scope) {
    $scope. wordctrl= ' Hello ';
}]);
App.directive (' Test ', function () {
    return{
     restrict: ' E ',
     Template: "<div>{{word}}</div > ",
     link:function (scope,ele,attr) {
      Scope.word=attr.word}}}
);

Display effect:

This is the most basic way to implement the binding of strings in scope

2. In fact, we can do this by rewriting the method

App.directive (' Test ', function () {
    return{
     restrict: ' E ',
     scope:{
      Word: ' @ '
     },
     Template: " <div>{{word}}</div> ",
    }
});

The link function can be removed and the @ binding is added, so that the property in the instruction is successfully bound to the command scope string.

3. ' = ' binding

If you use = bind, you can change not only the values in the scope in the instruction, but also the values in the parent controller to enable two-way binding.

Example:

<div>
   <span>ctrl:</span>
   <input ng-model= "Wordctrl"/>
</div>
<test word= ' {Wordctrl}} ' ></test>

App.directive (' Test ', function () {
    return{
     restrict: ' E ',
     scope:{
      Word: ' @ '
     },
     Template: "Directive:<input ng-model= ' word '/>",
    }
});

The effect is that changing the value of the scope in the instruction also changes the value of the corresponding variable in the controller, and realizes the bidirectional binding of the scope in the controller and the instruction.

The effect is as follows:

3. ' & ' method

<test greet= "SayHello ()" ></test>

App.directive (' Test ', function () {
    return{
     restrict: ' E ',
     scope:{
      greet: ' & '
     },
     Template: "<div ng-click= ' SayHello ({name: ' Yuxiaoliang '} ') ' > Click to say Hello</div>",
    }
});

Note the method of passing parameters.

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.