Home > Developer > Web Develop
Reference: Https://github.com/angular/angular.js/wiki/Understanding-Directives
Injecting, compiling, and linking functionsWhen you create a directive, there is essentially up to 3 function layers for your to define [1]:
MyApp.directive' UIJQ‘,functionInjectingfunction () {= = = Injectingfunction = = =/Logic is executed 0 or 1 times per app (depending on if directive is used).Useful for bootstrap and global configurationreturn {Compile:functionCompilingfunction ($templateElement,$templateAttributes) {= = = Compilingfunction = = =/Logic is executed once (1) for every instance of UI-JQ in your original unrendered template.Scope is unavailable as the templates was only being cached.You CAN examine the DOM and cache information about what variablesOr expressions'll is used, but you cannot yet figure out their values.Angular is caching the templates, now is a good time to inject new Angular templatesAs children or siblings to automatically run:return function linkingfunction ($ Scope, $linkElement, $linkAttributes) {//= = = Linkingfunction = = =////Logic is executed once (1) for every RENDERED instance. //Once for each row in a ng-repeat when the row is created. //Note that ng-if or ng-switch could also affect if this is executed. //Scope is available because controllers logic has finished executing. //all variables and expression values can-finally be determined. //Angular is rendering cached templates. It ' s too late to add templates for angular //to automatically run. If You must inject new templates, you must $compile them manually. }; } };})
You can have access data in $scope inside the linkingfunction. Since The template logic may remove or duplicate elements, you can only rely on the final DOM configuration in th Elinkingfunction. You still cannot rely upon children or following-siblings since they has not been linked yet.
Examples are as follows: Http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview
Index.html
<!doctype html>App.js
Angular.module (' compilation ', []). directive (' Logcompile ', function ($rootScope) { $rootScope. log = ""; return { controller:function ($scope, $attrs) { $rootScope. log = $rootScope. Log + ($attrs. Logcompile + ' (Control Ler) \ n ') , compile:function compile (element, attributes) { $rootScope. log = $rootScope. Log + attributes.ysrfly+ (Attributes.logcompile + ' (compile) \ n '); return { pre:function prelink (scope, element, attributes) { $rootScope. log = $rootScope. Log + ( Attributes.logcompile + ' (pre-link) \ n ') , post:function postlink (scope, element, attributes) { Element.prepend (attributes.logcompile); $rootScope. log = $rootScope. Log + (Attributes.logcompile + ' (post-link) \ n ');}};}};} ). directive (' Terminate ', function () { return { terminal:true };});Style.css
div { padding:5px; margin:5px; Background-color: #EEE; border:1px solid #BBB;} div > div { background-color: #DDD;} div > div > div { background-color: #CCC;} OL { list-style:decimal; margin-left:30px;}Effect
AngularJS Series (ii)--Understanding instruction understanding Directives
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
