查看: 2929|回复: 0

[JavaScript/JQuery] 爱创课堂 前端教程 angular 教程 课堂笔记 Transclude Require

发表于 2018-1-18 09:39:33
Transclude作用:是将自定义指令元素中的未知内容,插入到模板中,

这个指令要有模板配合(内部模板或者外部模板)

内部模板通过template定义

外部模板通过templateUrl定义

模板会告诉我们这些未知的内容会放在哪里,这个元素就要有ng-transclude指令

必须设置transclude属性,并且属性值必须是true

1 .directive('myTime', function ($compile) {
2 // 直接将指令对象返回
3 return  {
4 // template: '<h1>{{time}}</h1>',
5 templateUrl: 'time.html',
6 transclude: true,
7 controller: function ($scope) {
8 // 定义time变量
9 var date = new Date();
10 $scope.time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
11 }
12 }
13 })

Require为自定义指令添加依赖指令的,他的值是一个数组,我们可以将多个指令传递进来,

如果依赖的指令只有一个,我们可以不用数组,直接书写,此时link方法中第四个参数就是该指令控制器

当添加这个属性的时候,link函数会增加一个参数来表示它

1 .directive('myDeal', function () {
2 // 创建指令对象
3 return {
4 restrict: 'A',
5 require: 'ngModel',
6 link: function (scope, jqlite, attrs, ctrl) {
7 // 创建一个span元素
8 var span = document.createElement('span');
9 span.className = 'check-span'
10 // 将my-deal内容渲染到span中
11 span.innerHTML = attrs.myDeal;
12 var hasAdd = false;
13 // 监听ng-model的值改变
14 scope.$watch(attrs.ngModel, function (value) {console.log(ctrl.$invalid)
15 // 判断ngModel指令是否合法
16 if (ctrl.$invalid) {
17 // 将input元素边框变红
18 jqlite.css('borderColor', 'red')
19 // 在input元素后面添加一个span
20 if (!hasAdd) {
21 jqlite.after(span)
22 hasAdd = true;
23 }
24 span.style['display'] = 'block';
25
26 } else {
27 // 将input元素边框编程黑色
28 jqlite.css('borderColor', 'black')
29 // 将input元素后面的span隐藏
30 span.style['display'] =  'none';
31 }
32 })
33 console.log(arguments)
34 }
35 }
36 })

往期文章

angular课堂笔记 第一天

js基础 定时器

js基础 IE6,7,8方法

js基础 高级浏览器

js基础 对应思想 排他思想

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/




回复

使用道具 举报