Controller and link in the ANGULARJS Directive (12)

Objective

The controller and link attributes exist in the directive, which is a bit of a question for both of them, so they find the information to study.

Topic

First, let's take a look at the code and analyze it.

First attempt

Page:

    < custom-directive ></ custom-directive >

Script:

angular. Module (' App ', []). Directive (' Customdirective ', customdirective);functioncustomdirective () {vardirective ={restrict:' EA ', Template:' <div>{{vm.test}}</div> ', Link:function() {}, Controller:directivecontroller, Controlleras:' VMS '    }; returndirective;}functionDirectivecontroller () {varVM = This; Vm.test= "I ' m from Controller";}

"Note": The foundation is still very important, on the page for Custom-directive, in the script I write customdirective when the death has no effect, changed to customdirective.

Second attempt

The page customization instructions do not change, we modify the following script:

angular    . Module (' app ', [])    . Directive (' customdirective ', customdirective); function customdirective () {    var directive = {        ' EA ',        ' <div>{{test }}</div> ',        link:directivelink    };     return directive;} function Directivelink (scope,elem,attr) {    = "I ' m from Link";}

Here, we not only have to start to think: the controller and link in the directive can achieve the same effect, that in the instructions to put these two properties why? Is our code on the controller or link?

Let's take a look at the first thing. When used together, the order in which the results are rendered is the order in which they are generated before and after compilation.

Controller and link compilation order

We will modify the script as follows:

angular. Module (' App ', []). Directive (' Customdirective ', customdirective);functioncustomdirective () {vardirective ={restrict:' EA ', Template:' <div>xpy0928{{test}}</div> ', Link:directivelink, Controller:directivecontroller}; returndirective;}functionDirectivecontroller ($scope) {$scope. Test= "From Contrller cnblogs";}functionDirectivelink (scope,elem,attr) {scope.test= Scope.test + ", and from Link Cnblogs";}

Generated as follows:

We conclude that the controller is executed before compiling and the link is executed after compiling.

But we have not fundamentally solved the problem, what code should be put in the controller and link? Let's look at one more example:

varApp = Angular.module (' app ',[]); App.directive (' Customdirective ', customdirective);functioncustomdirective () {vardirective ={restrict:' EA ', Template:' <child-directive><child-directive> ', controller: function ($scope, $element) {$element. Find (' span '). Text (' Hello cnblogs! '));    }    }; returndirective;} App.directive ("Childdirective", childdirective);functionchilddirective () {vardirective ={restrict:' EA ', Template:' , replace:true, Link:function($scope, $element, attr) {$element. ReplaceWith (Angular.element (' <span> ' + $element. Text () + ' </span> ')); }    }    returndirective;}

Should the result be either Hello xpy0928 or hello cnblogs? Let's look at the results:

Let's take a look at the changes above:

varApp = Angular.module (' app ',[]); App.directive (' Customdirective ', customdirective);functioncustomdirective () {vardirective ={restrict:' EA ', Template:' <child-directive><child-directive> ', Link: function (scope, EL) {el.find (' span '). Text (' Hello cnblogs! '));    }    }; returndirective;} App.directive ("Childdirective", childdirective);functionchilddirective () {vardirective ={restrict:' EA ', Template:' , replace:true, Link:function($scope, $element, attr) {$element. ReplaceWith (Angular.element (' <span> ' + $element. Text () + ' </span> ')); }    }    returndirective;}

Why is this happening? Because the link function in all child-directive directives is not running in the controller function at this time, the substitution is not valid at this time.

Thus we can basically draw the conclusion of what code should be written in the controller and link:

(1) When the controller writes the business logic (we understand that the business logic is mostly placed in the service), the business logic described here is to expose the API for the data prepared before the view is rendered or to interact with other instructions.

(2) The main operation of the DOM in link.

Summarize

Instruction is a more important piece of angularjs, it involves a lot of things, from time to time to go inside to fill things, slowly will be handy.

Controller and link in the ANGULARJS Directive (12)