爱创课堂前端教程angular教程课堂笔记 Link Compile

Link方法

对自定义指令的编译方法，

到目前为止，我们只是操作自定义指令的内容，作用域，对于指令具体实现什么功能我们还没办法实现

有三个参数

Scope 自定义指令的作用域

Jqlite 获取的自定义指令元素jqlite对象

Attrs 自定义指令元素的属性对象

在link方法中，我们可以对指令元素添加功能

Scope.$watch方法，可以实现对属性值的监听。

1 app.directive('repeatNum', function () {

2 // 指令对象

3 return {

4 restrict: 'A',

5 // 定义link方法实现重复渲染的功能

6 /**

7  * 实现指令元素功能的方法

8  * @scope 指令作用域

9  * @jqlite 指令元素jqlite对象

10  * @attrs   指令元素的属性对象

11  */

12 link: function (scope, jqlite, attrs) {

13 // 根据attrs中repeatNum的值将div渲染repeatNum次

14 // 第一步获取num值

15 var num = attrs.repeatNum;

16 // 第三步渲染这些元素（在指令元素后面）

17 // for (var i = 0; i < num; i++) {

18

19 // // 第二步获取指令元素

20 // var dom = jqlite.clone()

21 // console.log(jqlite.after)

22 // jqlite.after(dom);

23 // }

24

25 // 获取子元素

26 var dom = jqlite.children();

27 for (var i = 0; i < num; i++) {

28 // 克隆元素

29 var cloneDom = dom.clone();

30 // 将克隆的元素插入到元素的后面

31 jqlite.append(cloneDom);

32 }

33 // console.log(jqlite.children())

34 }

35 }

36 })

Compile

表示指令编译的全过程

特征

1 页面中有几个自定义指令就会调用几次，跟link是一样的

2 参数有两个（默认情况）

第一个参数表示jqlite对象

第二个attrs属性对象

3 作用域就是自定义指令对象（通过this访问自定指令对象上的属性方法）

4 返回值就是link函数，使用方式跟link方法是一致

5 在该方法中（返回函数的前面）我们是无法使用作用域的，也就是说自定指令作用域是在link方法执行前创建

6 link方法和compile都是在每次创建自定义指令时候调用的方法，但是compile方法不论页面中有多少个自定义指令元素，那么它一定在link方法执行之前执行

1 .directive('icktShow', function ($compile) {

2 // 直接将指令对象返回

3 return  {

4 // 定义指令类型

5 restrict: 'A',

6 compile: function () {

7 // console.log(this, 111)

8 // console.log(arguments, 2222)

9 // 返回值就是link函数

10 return function (scope, jqlite, attrs) {

11 // 监听ickt-show属性

12 scope.$watch(attrs.icktShow, function (value) {

13 // 如果value是true的值，我们要显示，否则将元素隐藏

14 if (value) {

15 // 将元素显示

16 // console.log(jqlite)

17 jqlite.css('display', 'block')

18 } else {

19 jqlite.css('display', 'none')

20 }

21 })

22 }

23 }

24 }

25 })