<!DOCTYPE html> <html data-ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body data-ng-controller="myAppCtrl"> <data-compile-and-link>{{name}}</data-compile-and-link> <level-one> <level-two> <level-three> Hello </level-three> </level-two> </level-one> </body> <script src="angular.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('myAppCtrl', function ($scope) { $scope.name = 'Jackey'; }); // /* myApp.directive('compileAndLink', function () { return { restrict: 'E', controller: function ($scope, $element) { console.log('controlle:begin...'); }, compile: function (cElement, cAttrs) { console.log('compile:begin...'); return { pre: function (preScope, preElement, preAttrs) { console.log('pre link:begin...'); }, post: function (postScope, postElement, postAttrs) { console.log('post link:begin...'); } }; }, link: function (linkScope, linkEelemnt, linkAttr) { console.log('link begin...'); } }; });*/ //result: // compile:begin... // index.html:21 controlle:begin... // index.html:27 pre link:begin... // index.html:30 post link:begin... //我们可以知道：directvie的先后顺序是compile - controller - pre - post 。。。 //link没有执行，是因为link就是compile里面的post link了。 function createDirective(name) { return function () { return { restrict: 'E', compile: function (tElem, tAttrs) { console.log(name + ': compile'); return { pre: function (scope, iElem, iAttrs) { console.log(name + ': pre link'); }, post: function (scope, iElem, iAttrs) { console.log(name + ': post link'); } } } } } } // myApp.directive('levelOne', createDirective('levelOne')); // myApp.directive('levelTwo', createDirective('levelTwo')); // myApp.directive('levelThree', createDirective('levelThree')); //result: // levelOne: compile // levelTwo: compile // levelThree: compile // levelOne: pre link // levelTwo: pre link // levelThree: pre link // levelThree: post link // levelTwo: post link // levelOne: post link function createDirective(name){ return function(){ return { restrict: 'E', compile: function(tElem, tAttrs){ console.log(name + ': compile => ' + tElem.html()); return { pre: function(scope, iElem, iAttrs){ console.log(name + ': pre link => ' + iElem.html()); }, post: function(scope, iElem, iAttrs){ console.log(name + ': post link => ' + iElem.html()); } } } } } } myApp.directive('levelOne', createDirective('levelOne')); myApp.directive('levelTwo', createDirective('levelTwo')); myApp.directive('levelThree', createDirective('levelThree')); // levelOne: compile => // <level-two> // <level-three> // Hello // </level-three> // </level-two> // // levelTwo: compile => // <level-three> // Hello // </level-three> // // levelThree: compile => // Hello // // levelOne: pre link => // <level-two> // <level-three> // Hello // </level-three> // </level-two> // // levelTwo: pre link => // <level-three> // Hello // </level-three> // // levelThree: pre link => // Hello // // levelThree: post link => // Hello // // levelTwo: post link => // <level-three> // Hello // </level-three> // // levelOne: post link => // <level-two> // <level-three> // Hello // </level-three> // </level-two> //留意post link是一个反向的解析 </script> </html>