Angularjs学习笔记8

指令难点在于参数

angular.module('app', [])

.directive('myDirective', function() {

return {

restrict: String,

priority: Number,

terminal: Boolean,

function(tElement, tAttrs) {...},

templateUrl: String,

replace: Boolean or String,

scope: Boolean or Object,

transclude: Boolean,

controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },

controllerAs: String,

require: String,

link: function(scope, iElement, iAttrs) { ... },

compile: // 返回一个对象或连接函数，如下所示：

function(tElement, tAttrs, transclude) {

return {

pre: function(scope, iElement, iAttrs, controller) { ... },

post: function(scope, iElement, iAttrs, controller) { ... }

}

return function postLink(...) { ... }

}

};

});

1. 分成三类：

1. 描述指令或DOM本身特性的内部参数

2. 连接指令外界、与其他指令或控制器沟通的对外参数

3. 描述指令本身行为的行为参数

2. 内部参数

· restrict：String，E（元素）<my-directive></my-directive>
                A（属性，默认值）<div my-directive="expression"></div>
                C（类名）<div class="my-directive:expression;"></div>
                M（注释）<--directive:my-directive expression-->

· priority: Number，指令执行优先级

· template: String，指令链接DOM模板，例如“<h1>{{head}}</h1>”

· templateUrl:String，DOM模板路径

· replace: Boolean，指令链接模板是否替换原有元素，

3. 对外参数——scope

scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

scope参数是可选的，默认值为false，可选true、对象{}；

· false：共享父域

· true：继承父域，且新建独立作用域

· 对象{}：不继承父域，且新建独立作用域

false、true、{}三者对比

4. 对外参数——require

scope是指令与外界作用域通讯的桥梁，而require是指令与指令之间通讯的桥梁。这个参数最大的作用在于，当要开发单指令无法完成，需要一些组合型指令的控件或功能，例如日期控件，通过require参数，指令可以获得外部其他指令的控制器，从而达到交换数据、事件分发的目的。

使用方法：require: String or Array——String值为引入指令名称，并且有两个寻找指令策略符号‘？’与‘^’；Array数组则为多个外部指令名称。

在link函数第4个参数ctrl中获取注入外部指令的控制器，如果require为String，ctrl为对象，如果require是数组，ctrl为数组。

require: '^teacher1',

link: function ($scope, $element, $attrs, ctrl) {

//ctrl指向teacher1指令的控制器

}

？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错。

^ 策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找。

指令studentA向上可以找到指令teacher及自身，但是不能找到相邻兄弟的student-b。

5. 行为参数——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找到了所有的指令及模板，形成模板树，并返回模板函数，提供给下一阶段进行数据绑定。

<!DOCTYPE html>

<head>

</head>

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

app.directive( 'stu1' , function () {

return {

restrict: 'E' ,

link: function (scope) {

console.log( 'stu1 running' );

}

};

});

app.directive( 'stu2' , function () {

return {

restrict: 'E' ,

link: function (scope) {

console.log( 'stu2 running' );

}

};

});

app.directive( 'stu3' , function () {

return {

restrict: 'E' ,

link: function (scope) {

console.log( 'stu3 running' );

}

};

});

</script >

</ body>

1 2 3 三个模板都渲染完成了。然后从最根部的stu3的link函数开始，依次执行stu 3 stu2 stu1的link函数。

简单来说就是：

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

2. @@@@

3. 数据绑定

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

执行顺序是？答案是先controller，后link。

放到全局顺序就是：

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

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

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

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

巴特西

Angularjs学习笔记8_directive2

最新文章

热门文章