Angularjs
发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Directive - Compile vs. Link，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
还是先从栗子们看起~
如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。
输入Hellobug
失去焦点后提示Hellobug这个用户名已经存在
代码如下：
HTML
1
2
3
4
5
6
|
<body ng-controller="MainCtrl"> <lable>用户名: <input type="text" ng-model="username" ng-blur="checkUsername()" /> <span style="color:red;" ng-show="usernameAlreadyExist">用户名已经存在</span> </lable> </body> |
controller和directive的定义
6
7
8
9
10
11
12
13
14
15
16
17
18
@H_262_132@app.controller('MainCtrl', function($scope) { $scope.checkUsername = function() { //send ajax to check on server if (username === 'Hellobug') { usernameAlreadyExist = true; } } }); directive('ngBlur',0)!important">$document) { return { link: scope, element,0)!important">attrs) { $(element).bind('blur',0)!important">e){ scope.$apply(attrs.ngBlur); }); } } }) |
在上面的例子里，directive返回对象里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。
如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~
directive的简单写法
7
return ngBlur); }); }; }) |
再来这样一个功能，我想让内容为哈哈哈哈的dom元素重复n遍，n是自定义的，以达到某种满屏大笑丧心病狂的效果 -_-，我知道ng-repeat就已经能干这事儿了，但是如果自己实现一下呢~
HTML
3
<ul repeater="20"<li>哈哈哈哈</li> </ul> |
11
'repeater',0)!important">reStrict: 'A', compile: attrs) { var template = children().clone(); for(i=0; i<repeater - 1; i++) { append(template.clone()); } } } }); |
在上面例子的compile方法里，子元素被复制成了repeater制定的数量。
什么时候用compile，什么时候用link呢，或者两者可不可以一起用呢？
先从directive是如何在angular手下生效的说起吧~
编译三阶段：
1. 标准浏览器API转化
将html转化成dom，所以自定义的html标签必须符合html的格式
2. Angular compile
搜索匹配directive，按照priority排序，并执行directive上的compile方法
3. Angular link
执行directive上的link方法，进行scope绑定及事件绑定
为什么编译的过程要分成compile和link?
简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat
compile和link的形式
compile
-
function compile(element,attrs,transcludE) { ... }
- 在compile阶段要执行的函数，返回的function就是link时要执行的function
- 常用参数为
element和attrs，分别是dom元素和元素上的属性们，其它的以后细说
- 较少使用，因为大部分directive是处理dom元素的行为绑定，而不是改变它们
link
function link(scope,element,controller) { ... }
- 在link阶段要执行的函数，这个属性只有当compile属性没有设置时才生效
- 常用参数为
scope，attrs，分别是当前元素所在的scope，dom元素和元素上的属性们，其它的以后细说
- directive基本上都会有此函数，可以注册事件，并与scope相绑
link的使用时机
想在dom渲染前对它进行变形，并且不需要scope参数
想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好
返回值就是link的function，这时就是共同使用的时候
对特定的元素注册事件
需要用到scope参数来实现dom元素的一些行为
最后~
本节目所用示例可以猛戳这里查看ho~
@L_874_42@
大佬总结
以上是大佬教程为你收集整理的Directive - Compile vs. Link全部内容，希望文章能够帮你解决Directive - Compile vs. Link所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
