Directive - Compile vs. Link

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了Directive - Compile vs. Link，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

还是先从栗子们看起~

如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。

输入hellobug

失去焦点后提示hellobug这个用户名已经存在

代码如下：

HTML
@H_404_100@ controller和directive的定义
6 7 8 9 10 11 12 13 14 15 16 17 18
@H_404_100@

在上面的例子里，directive返回对象里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。

如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~

directive的简单写法
7
@H_404_100@

再来这样一个功能，我想让内容为哈哈哈哈的dom元素重复n遍，n是自定义的，以达到某种满屏大笑丧心病狂的效果 -_-，我知道ng-repeat就已经能干这事儿了，但是如果自己实现一下呢~

HTML
3
@H_404_100@ directive的定义
11
@H_404_100@

在上面例子的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~

    原文地址

    猜你在找的Angularjs相关文章

    AngularJS 简介
    AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
    angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
    angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
    AngularJS 指令
    AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
    AngularJS 表达式
    AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
    AngularJS 表格
    ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
    AngularJS 控制器
    AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
    AngularJS Filters
    过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
    KeyPress 和KeyDown 、KeUp之间的区别
    keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
    angularjs -- 页面模板清除
    angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
    angularjs -- 监听angularJs列表数据是否渲染完毕
    前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作
    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> 
    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);  });  }  } }) 
    return ngBlur);  });  }; }) 
    <ul repeater="20"<li>哈哈哈哈</li> </ul> 
    'repeater',0)!important">restrict: 'A',  compile: attrs) {  var template = children().clone();  for(i=0; i<repeater - 1; i++) {  append(template.clone());  }  }  } });