| Angular自定义指令之compile, link, controller属性详解及实例演示 | 您所在的位置：网站首页 › link函数用法 › Angular自定义指令之compile, link, controller属性详解及实例演示 |
Angular自定义指令之compile, link, controller属性详解及实例演示
|
本文章主要就angularjs指令中的compile，link及controller函数的使用和区别进行详细讨论。以下是本文的结构： directive的执行原理compile用法link 用法controller 用法compile，link及controller区别link和controller之间传参 directive的执行原理在详细讨论以上五点之前，先要讨论下directive的执行原理。在AngularJS应用启动前，指令都以html文本的形式保存在文本编辑器中。当该应用启动后，会进过两个阶段，即编译阶段和链接阶段。之后，作用域（scope）会同html进行绑定，应用会对html中dom的操作进行实时响应。整个过程主要有两个阶段： 编译阶段： AngularJS会遍历整个html文档并根据JS中的指令定义来处理页面上声明的指令。换句话说， 在遍历dom时，所有的指令将被收集，但对dom树还没有进行数据绑定，此时对dom操作对性能影响很小。在编译阶段，同种 directive 在不同的 dom 节点出现一次，编译也会随之执行一次。然而，在这个阶段 scope 是无法访问到的。一个指令一旦编译完成，马上就可以通过编译函数对其进行访问，编译函数的签名包含有访问指令声明坐在的元素element以及钙元素其他属性attrs的方法。这个编译函数会返回一个模板函数，包含有完整的解析树。最后，模板函数被传递给编译后的dom树中，每个指令定义的链接函数。 链接阶段： Angular 会把所有 directive 的事件监听器注册到dom中并建立对 scope（作用域）的监听，并且把一个 scope 加到 directive 中。由于链接阶段是在编译阶段之后进行的，所以这时的scope是可以访问的。 compile用法compile函数负责对模板dom进行转换，它返回一个对象或者函数。compile本身相较于link函数不会那么频繁地使用。通常情况下，如果设置了compile函数，那就意味着可以在指令和实时数据被放到dom中之前对dom进行操作，在这个函数中进行例如添加或删除节点等dom操作都是安全的。 注意：compile和link是相斥的。如果同时设置了两项，compile返回的函数会被当作链接函数把后面定义的link函数所取代，也就是说，后面的link函数将起不到作用。 // ... compile: function(element, attrs){ var curEle = angular.element('id'); return function(scope, element, attrs) { //链接函数 }; } // ... link函数用法link函数负责将作用域和dom进行链接，并对元素的注册事件进行监听。而在这个操作执行之前，可以手动操作dom。如果有了编译函数，它会返回一个链接函数，不需要另外定义。如果自定义指令很简单，可以从工厂函数返回一个函数来代替对象(见代码1)，这样也算是一个链接函数。一般来说，都可按照代码2来定义link函数（该函数的参数列表是固定的）。 代码1： app.directive('myDirective', function() { return { pre: function(tElement, tAttrs, transclude) { //在子元素被链接之前执行 //在这里进行dom转换不安全 //之后调用link函数将无法定位要链接的元素 } }, { post: function(tElement, tAttrs, transclude) { //在子元素被链接之后执行 //这里就相当于link函数，可以省略到编译函数 } } });代码2： app.directive('myDirective', function() { return { link: function(scope, element, attrs, controller) { //controller是require中指定的控制器，名字不能写错，不然对应不起来... } } }); controller用法controller这里的属性值可以是一个字符串（控制器名称）或者函数（控制器内容）。如果属性值为字符串时，会以字符串为控制器的名字，查找在应用中已经注册过的控制器的构造函数。 app.directive('myDirective', function() { return { controller: function($scope, $element, $attrs, $transclude) { //controller逻辑内容 } or controller: 'MyController' } });一般在控制器内部操作dom与AngularJS的风格不符，所以需要通过链接函数来实现这个功能。 自定义指令的控制器和link函数是可以进行互换的。控制器主要用来提供可在指令间复用的行为，但是链接函数只能在当前内部指令中定义行为，且无法在指令间复用。 compile，link及controller区别执行顺序： app.directive('myDirective', function() { return { restrict: 'AE', compile: function(tElem, tAttrs) { console.log(' compile start '); return { pre: function(scope, iElem, iAttrs) { console.log('pre link start '); }, //这里的post函数想当于link函数 post: function(scope, iElem, iAttrs) { console.log('post link start '); } } }, controller: function($scope, $element, $attrs) { console.log(' controller start '); } }; });结果： 作用： compile：负责对模板dom进行转换；link： 负责将作用域和dom进行链接，并对元素的注册事件进行监听，只能在当前内部指令中定义行为，且无法在指令间复用；controller：用来提供可在指令间复用的行为。compile与link区别在于它们要做的事情不同，而link与controller在于这两个函数上的定位。 link和controller之间传参请参考：http://blog.csdn.net/victoryzn/article/details/77600769 |
可见compile函数最先执行，其次是controller，然后是pre和post（link）函数。【本文地址】