angularjs compile和link的区别

        angularjs的指令中，compile和link的区别一直是大家所疑惑的，网上的文章也有点搞笑，翻来覆去都是同一篇文章，而且感觉说了半天也没有重点。

        其实这两者的一个很大的区别就是compile可以安全的修改DOM，link则不能。换句话说，compile在修改了DOM后进行编译，link修改了DOM后不再自动编译。

        实际的执行流程是这样的：

        1、先调用控制器（如果有的话）

        2、调用指令的compile，这个时候还没有生成作用域

        3、编译，生成作用域

        4、调用pre方法，把element和作用域作为形参传入

        5、调用post方法，post方法就是link方法。把element和作用域作为形参传入

        因此，如果我们在link中这样写：

       

<pre name="code" class="javascript">link: function ($scope, $elem, attrs) {
var tableRow = "";
tableRow=['<li ><a href="#" class="menu1" ng-click="displaySwitch(0)"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>模块1',
'<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>',
'<ul class="cl-effect-2" ng-show="menus[0].isShow">',
'<li><a href="model1.html">模块11</a></li>',
'</ul>'
].join('');
$elem[0].innerHTML = tableRow;
}

注意：其中用到了ng-click、ng-show等内置指令

       这样写的话，我们发现一个问题，内置指令都没有生效。为什么，因为在compile后已经将所有指令编译了，link不会再编译。

       如果我们在compile中写这段代码：

compile: function(element,attar,linker){
var tableRow = "";
tableRow=['<li ><a href="#" class="menu1" ng-click="displaySwitch(0)"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>模块1',
'<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>',
'<ul class="cl-effect-2" ng-show="menus[0].isShow">',
'<li><a href="model1.html">模块11</a></li>',
'</ul>'
].join('');
element[0].innerHTML = tableRow;
}

        这样的话，内部指令就生效了。

       

        最后还有一个问题，在compile中没有作用域，因为作用域是编译后生成后的。如果我又要访问作用域，又要使用内部指令怎么办，要解决这个问题，可以通过依赖注入$compile这个服务，在link中手动编译，如下     

link: function ($scope, $elem, attrs) {
var tableRow = "";
tableRow=['<li ><a href="#" class="menu1" ng-click="displaySwitch(0)"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>模块1',
'<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>',
'<ul class="cl-effect-2" ng-show="menus[0].isShow">',
'<li><a href="model1.html">模块11</a></li>',
'</ul>'
].join('');
$elem[0].innerHTML = tableRow;
$compile($elem.contents())($scope);
 }