爱创课堂前端教程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 })
|
|
