首页 > 代码库 > angularJS 系列（二）——理解指令 understanding directives
angularJS 系列（二）——理解指令 understanding directives
参考：https://github.com/angular/angular.js/wiki/Understanding-Directives
Injecting, Compiling, and Linking functions
When you create a directive, there are essentially up to 3 function layers for you to define [1]:
myApp.directive(‘uiJq‘, function InjectingFunction(){ // === InjectingFunction === // // Logic is executed 0 or 1 times per app (depending on if directive is used). // Useful for bootstrap and global configuration return { compile: function CompilingFunction($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 are only being cached. // You CAN examine the DOM and cache information about what variables // or expressions will be used, but you cannot yet figure out their values. // Angular is caching the templates, now is a good time to inject new angular templates // as children or future 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 an ng-repeat when the row is created. // Note that ng-if or ng-switch may also affect if this is executed. // Scope IS available because controller 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 only 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 theLinkingFunction. You still cannot rely upon children or following-siblings since they have not been linked yet.
例子如下：http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview
index.html
<!doctype html><html ng-app="compilation"><head> <meta charset="utf-8"> <title>Compilation Demo</title> <link rel="stylesheet" href="http://www.mamicode.com/style.css"> <script src="http://code.angularjs.org/1.1.1/angular.js"></script> <script src="http://www.mamicode.com/app.js"></script></head><body><div log-compile="parent"> <div log-compile="..child 1"> <div log-compile="....child 1 a"></div> <div log-compile="....child 1 b"></div> </div> <div log-compile="..child 2"> <div log-compile="....child 2 a" ysr-fly="ysrflyhah"></div> <div log-compile="....child 2 b"></div> </div></div><!-- LOG --><pre>{{log}}</pre></body></html>app.js
angular.module(‘compilation‘, []).directive(‘logCompile‘, function($rootScope) { $rootScope.log = ""; return { controller: function($scope, $attrs) { $rootScope.log = $rootScope.log + ($attrs.logCompile + ‘ (controller)\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;}效果如图：
angularJS 系列（二）——理解指令 understanding directives
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。