RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
 

Angular.JS中指令的参数有哪些

既然require可以获取外部指令,那Angular原生指令应该也是能够获取。其中最广泛应用的就是require: 'ngModel',关于ngModel在自定义指令上的应用,留待下回实例中再跟大家深入讨论。

行为参数——link与controller

为什么要把link与controller两个参数放到一起?

因为很多童鞋会把它们错误地混淆使用,包括我自己。

link与controller都是描述指令行为的参数,但它们是要描述的行为是完全不同的类型。

controller语法 controller:String or Function

controller本身的意义就是赋予指令控制器,而控制器就是定义其内部作用域的行为的。

所以controller要描述的是:指令的作用域的行为。

//指向匿名控制器
controller: function ($scope) {
},
//指向控制器mainCtrl
controller: "mainCtrl"

link语法 link:String Or Function

link名称是链接函数,啥意思,好像挺难理解。所以在解释链接函数之前,先要说一下Angular的初始化对于指令究竟做了什么。

Angular在刚从HTTP Response接收静态素材之初,会首先去分析母页HTML中有哪些原生指令或自定义指令,然后再去加载指令的template模板HTML,而template模板中又去加载自己的指令模板,如此类推,直到Angular找到了所有的指令及模板,形成模板树,并返回模板函数,提供给下一阶段进行数据绑定。

 
 
  var app = angular.module("app" , []);

  app.directive( 'stu1' , function () {
   return {
    restrict: 'E' ,
    template: "

1

" ,     link: function (scope) {      console.log( 'stu1 running' );     }    };   });   app.directive( 'stu2' , function () {    return {     restrict: 'E' ,     template: "

2

" ,     link: function (scope) {      console.log( 'stu2 running' );     }    };   });   app.directive( 'stu3' , function () {    return {     restrict: 'E' ,     template: "

3

" ,     link: function (scope) {      console.log( 'stu3 running' );     }    };   });  
  console output stu3 running stu2 running stu1 running

Angular.JS中指令的参数有哪些

注意以上例子,在第一个断点stu3 running的时候,1 2 3 三个模板都渲染完成了。然后从最根部的stu3的link函数开始,依次执行stu 3 stu2 stu1的link函数。

简单来说就是:

  1. 加载模板,形成DOM模板树

  2. @@@@

  3. 数据绑定

@@@@是啥?没错,就是link链接函数,它会在形成模板树之后,在数据绑定之前,从最底部指令开始,逐个指令执行它们的link函数。

在这个时间节点的link函数,操作DOM的性能开销是最低,非常适合在这个时机执行DOM的操作,例如鼠标操作或触控事件分发绑定、样式Class设置、增删改元素等等。

所以link就是描述指令元素操作行为。

link: function (scope, element, attr, ctrl) {

 element.bind("click", function () {
  console.log("绑定点击事件");
 });

 element.append("

增加段落块

");  //设置样式  element.css("background-color", "yellow");  //不推荐,在link中赋予scope行为  scope.hello = function () {   console.log("hello");  }; }

同理,在link中定义$scope行为是不推荐的。

这样想想,对于controller与link,就明白了。但还有一个问题,它们俩的执行顺序是?答案是先controller,后link。

放到全局顺序就是:

  1. 执行controller,设置各个作用域scope

  2. 加载模板,形成DOM模板树

  3. 执行link,设置DOM各个行为

  4. 数据绑定,最后scope绑上DOM

例子

 
  {{name }}
 
 

Angular.JS中指令的参数有哪些

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


新闻标题:Angular.JS中指令的参数有哪些
URL标题:http://xdwzjz.cn/article/pojdcp.html
Top