angularjs compile和link

转自：https://www.jianshu.com/p/e10ba0927ef1
在angularJs应用启动之前，它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接，作用域会同HTML进行绑定。

在编译的阶段，angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前，进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
本质上，当我们设置了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。编译函数compile负责对模板DOM进行转换。链接函数link负责将作用域和DOM进行链接。

59687-053e8b8ee76b74a0.png

//demo1 最简单的指令创建
ui.directive('header', function () {    
  return {        
    restrict: 'AE',        
    link: function (scope, element, attrs) {       
    }    
  }
});

//demo2 等价于demo1
ui.directive('header', function () {    
  return {        
    restrict: 'AE',        
    compile: function (element, attrs, transclude) { 
      return : function(scope, element, attrs){

      }
    }    
  }
});

//demo3 等价于demo1
ui.directive('header', function () {    
  return {        
    restrict: 'AE',        
    compile: function (element, attrs, transclude) { 
      return {              
        pre: function(scope, element, attrs){},              
        post: function(scope, element, attrs){}
      }
    }    
  }
});

如果同时设置了compile与link，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。

作者：牵着毛驴看世界
链接：https://www.jianshu.com/p/e10ba0927ef1
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。