Details of the Directive--require options for angular learning experience

Before talking about the Require option, you should say the controller option, the Controller option allows the instruction to provide a similar interface to other instructions, as long as the other instructions (or even yourself) need to obtain the controller, as an object, And get all the content. The require is the chain that connects two instructions, it can selectively get the controller that has already been defined in the instruction, and pass in as the fourth parameter of the link function, the four parameters of the link function are scope,element,attr and Somectrl respectively , the last one is the name of the controller acquired through require, and the controller name can be defined in the directive with the controlleras option, which is the key to releasing the controllers.

How do you get a controller? The values of the Require option can be prefixed with each other? , ^ and? ^ to be modified or not to be decorated.

If not decorated, such as require: ' thisdirective ', then require will only find the controller in the current instruction

If you want to point to the upstream instructions, then it is used ^ to decorate, such as require: ' ^parentdirective ', if not found, it will throw an error.

If you use? Prefix means that NULL is the fourth parameter of link if the controller is not found in the current instruction;

So, what if? Together with ^, we can specify both the upstream directive and the non-throwing of a serious error when it cannot be found.

Now the question is, what if I want to specify more than one instruction? At this point, we can put the required instructions into an array, for example: require:[' ^?firstdirective ', ' ^?seconddirective ', ' thisdirective ', this is not the form of dependency injection? Note , however, that if you use this notation, the name of the controller that was issued in the original instruction, the Controlleras option, loses its meaning. At this point, the way we call the controller of these instructions in link becomes: Define a name for the upper array first, and then specify a specific instruction according to its label. Similar to: ctrllist[0].

Okay, get ready for work, and then practice the Require option with a hodgepodge of examples. The effect I want to achieve is to specify, in the main instruction, the increment and decrease actions in the parent instruction, respectively.

JS Code:

Instructions to increase the operation:

. directive ("Add", function () {        return{             restrict: ' ECMA ',             controller:function ($scope) {                  $scope .count=0;                 this.addcount=function () {                      $scope. $apply ( function () {                          $scope .count++;                     })                  }            }         }    })

Instructions to reduce the operation:

. directive ("minor", function () {        return{             restrict: ' eCAM ',             controller:function ($scope) {                 this.reducecount=function () {                      $scope. $apply ( function () {                          $scope .count--;                     })                  }                            }         }    })

Main instruction:

. directive ("figure", function () {        return{             restrict: ' ECMA ',             template: ' <button id= ' Add '  class= ' Btn btn-default ' > Add </ Button> ' +                       ' <button id= ' minor " class=" Btn btn-danger "> Reduced </button > ' +                       ' <div>{{ figureCtrl.temp }}</div> ',             require:['? ^add ', '? ^minor '],             controller:function () {                  this.temp= "This property is isolated and can be called from a dynamic object created by Controlleras;             },             Controlleras: ' Figurectrl ',             link: function (Scope,element,attrs,resultctrl) {             angular.element (Document.queryselector (' #minor ')). On (' click ', Resultctrl[1].reducecount);             angular.element (Document.querySelector (' #add ')). On (' click ', Resultctrl[0].addcount);                        }         }    })

HTML code:

<add minor class= "Col-md-2 col-md-offset-3" > <div > Times: {{count}}</div> <figure> ;</figure> </add>

Running results such as:

Note the point:

1. Since both the add and minor directives have been injected into the Resultctrl array, you can use the Resultctrl[i].fun () method in order to invoke the methods in their controller;

2. Update the value of count, but the view is not changed, so it needs to be updated by manual $apply ();

3.controllerAs actually creates the controller as an object and is isolated.

Done! But still hope that the great God can be no stingy to my article to guide and correct, thank you!

Details of the Directive--require options for angular learning experience