This article mainly introduces the ANGULARJS instruction in the Compile and link function, this article at the same time, the use of complie,pre-link,post-link and the difference of the content, the need for friends can refer to the nextUsually when you use the instructions in Ng, the
documentation points to a problem: $interval registered anonymous functions are not automatically freed when an element is removed, there is a risk of memory leaks, so the code is added:Element.on (' $destroy ', function () {$interval. Cancel (Timeoutid);});These three lines of code also demonstrate how to add an event listener to an element within a directive, and the official documentation provides another example of the following code:Now review the isolation scope issues mentioned in the pr
Usually when you use the instructions in Ng, the link function is the most linked property, the following article will tell you complie,pre-link,post-link usage and differences.The instructions in the Angularjs are magical, allowing you to create very semantic and highly reusable components that can be understood as pi
I ' ve talked about the timing of directives in AngularJS a few times before. But, it's a rather complicated topic, so I don ' t mind digging a bit deeper. This time, I ' m looking at the timing of Directive controllers vs. directive link functions. As the DOM (Document Object Model) is compiled by AngularJS, the directive controllers and
instance element */ function(scope, iElem, iAttrs){ // ... };Post-link functionUse a post-link function to execute the business logic, at which point it already knows that all its child instructions have been compiled and that the pre-link post-link function has been completed.This is why it is considered the safest a
Label:If u using Controller controlleras in Directive, then the link () ' s 4th param ' controller ' would refer to the controller u defined before. functionMessagecontroller () {varVM = This; Vm.message= "Hello"; }
functiongreeting () {functionlink (scope, element, Attrs, ctrl) {Ctrl.message= Ctrl.message + "+Scope.name; }
return{controller:' Messagecontroller ', Controlleras:' VMS ', Link:link, scope: {name:‘@‘}, Template:'
}; } angu
The DOM is mostly manipulated in Angularjs, and now encounters a special case where the DOM is not available in one instruction:var directivectrl=angular.module ("Directivectrl", []);d Irectivectrl.controller ("Ctrltwo", [' $scope ', function ($ Scope) {$scope. Name= "Me";}]);Directivectrl.directive ("num", function () {return{restrict: ' E ', Template: ' The output is [comment] instead of [div.ng-scope.ng-binding], so the DOM element cannot be manipu
={restrict:' EA ', Template:' , replace:true, Link:function($scope, $element, attr) {$element. ReplaceWith (Angular.element (' )); } } 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
In Angularjs, you have a series of view that is responsible for rendering the data to the user; You have a controller that manages the $scope (view model) and exposes the relevant behavior (defined by $scope) to the view You have some directive to link the user interaction and $scope behavious. But there is one thing: a directive controller. This directive controller child is defined in a directive context,
In Angularjs, the same functionality is sometimes achieved with both link and controller in a custom directive process. So what's the difference between the two?Directive using the link functionThe page is roughly:Directive aspects:(function(){ varWithoutcontroller =function(){ varTempalte = ' ; varlink =function(scope, element, Attrs) {//get the data s
Compile
You want to distort the DOM before rendering it, and you don't need a scope parameterTo share certain methods in all the same directive, it should be defined in the compile, the performance will be betterThe return value is the function of link, when it is used together.
Link
Registering events on a specific elementYou need to use the scope parameter to implement some of the behavior of the DOM e
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.