请教angularJS 如何 console里直接 执行以下函数？

Question

请教angularJS 如何 console里直接 执行以下函数

Answer 1

第一个要注意的是这些函数的调用顺序:复制代码 代码如下:// COMPILE PHASE// levelOne: compile function is called// levelTwo: compile function is called// levelThree: compile function is called// PRE-LINK PHASE// levelOne: pre link function is called// levelTwo: pre link function is called// levelThree: pre link function is called// POST-LINK PHASE (Notice the reverse order)// levelThree: post link function is called// levelTwo: post link function is called// levelOne: post link function is called这个例子清晰的显示出了ng在link之前编译所有的指令,然后link要又分为了pre-link与post-link阶段.注意下,compile与pre-link的执行顺序是依次执行的,但是post-link正好相反.所以上面已经明确标识出了不同的阶段,但是compile与pre-link有什么区别呢,都是相同的执行顺序,为什么还要分成两个不同的函数呢?DOM为了挖的更深一点,让我们简单的修改一下上面的代码,它也会在各个函数里打印参数列表中的element变量复制代码 代码如下:var app = angular.module('plunker', []);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());}}}}}}app.directive('levelOne', createDirective('levelOne'));app.directive('levelTwo', createDirective('levelTwo'));app.directive('levelThree', createDirective('levelThree'));注意下console.log里的输出,除了输出原始的html标记基本没别的改变.这个应该能够加深我们对于这些函数上下文的理解.