打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
爱创课堂 前端教程 angular教程 课堂笔记 Link Compile
爱创课堂前端教程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 })
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
指令的Link函数和Scope
AngularJS 中的一些坑
angularJS directive详解
angularjs的$compile用法
Angular开发中的注意事项
AngularJS入门教程00:引导程序 | AngularJS中文社区
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服