《AngularJS》5个实例详解Directive(指令)机制
来源:互联网 发布:mac装win7 编辑:程序博客网 时间:2024/05/16 23:41
而使用AngularJS的directive(指令)机制,我们可以实现这样的东西:
子面板1
子面板2
很多人可能要惊呼,这货和JSP或者Struts等等框架里面的taglib很像啊!
呃,说实话,实际上就是这样的,只不过这里是使用JavaScript来实现的。正因为如此,所以很多taglib做不到的功能,使用它就都可以做到,比如访问N层scope里面的对象之类的事情(参见后面第5个例子)。
2.实例1:从最简单的开始
<script src="../angular-1.0.3/angular.min.js"></script><script src="HelloDirect.js"></script>
对于以上代码里面的标签,浏览器显然是不认识的,它唯一能做的事情就是无视这个标签。那么,为了让浏览器能够认识这个标签,我们需要使用Angular来定义一个hello指令(本质上说就是自己来把这种玩意儿替换成浏览器能识别的那些标准HTML标签)。
来看这段温馨的JS代码:
var appModule = angular.module(‘app’, []);
appModule.directive(‘hello’, function() {
return {
restrict: ‘E’,
template: ‘
replace: true
};
});
以上代码大概看两眼就可以了,不要太在意细节。
然后我们就可以在浏览器里面看到这样的内容:
实际产生的标签结构是这样的:
可以看到,这个东东已经被
ok,看完上面的表格,对于restrict这个属性相信你已经秒懂了,那么我们来玩儿点花样吧。如果我们需要替换的HTML标签很长,显然不能用 拼接字符串的方式来写,这时候我们可以用templateUrl来替代template,从而可以把模板写到一个独立的HTML文件中。
3.实例2:transclude(变换)
先看例子,JS代码:
var appModule = angular.module(‘app’, []);
appModule.directive(‘hello’, function() {
return {
restrict: ‘E’,
template: ‘
transclude: true
};
});
HTML代码:
原始的内容,
还会在这里。
<script src="../angular-1.0.3/angular.min.js"></script><script src="Transclude.js"></script>
运行效果如下:
生成的HTML标签结构如下:
和第一个例子对比,这个例子的JS和HTML代码都略有不同,JS代码里面多了一个transclude: true,HTML代码里面在内部出现了子标签。
按照我们在第一个例子中的说法,指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好,如果我们自定义的标签内部出现了子标签,应该如何去处理呢?很显然,transclude就是用来处理这种情况的。
对于当前这个例子,transclude的作用可以简化地理解成:把标签替换成我们所编写的HTML模板,但是标签内部的内容保持不变。
很显然,由于我们没有加replace:true选项,所以标签还在,没有被替换掉。同时,通过这个例子你还还会发现一 个暗藏的属性,那就是浏览器实际上非常智能,虽然它并不认识这个标签,但是页面没有出错,它只是默默地把这个标签忽略掉了!怎 么样?是不是碉堡了?
你可以自己在上面的JS代码里面加上replace:true,然后再看生成的HTML结构。
4.实例3:关于compile和link
JS代码:
var appModule = angular.module(‘app’, []);
appModule.directive(‘hello’, function() {
return {
restrict: ‘E’,
template: ‘Hi there‘,
replace: true
};
});
appModule.controller(‘MyController’,function(scope) {scope.things = [1,2,3,4,5,6];
});
HTML代码:
{{thing}}.
<script src="../angular-1.0.3/angular.min.js"></script><script src="CompileAndLink.js"></script>
呃,这个例子是用来解释一点点理论的,所以单纯看效果可能看不出个鸟。
如前所述,指令的本质其实是一个替换过程。好,既然如此,Angular到底是如何进行替换的呢?嗯嗯,这个过程分2个阶段,也就是本节标题所说的compile(编译)和link(连接)了。
简而言之,compile阶段进行标签解析和变换,link阶段进行数据绑定等操作。这里面更加细节的处理过程请参见《AngularJS》这本书中的解析,这里就不赘述了(呃,实际上是因为解释起来很长很麻烦,叔懒得在这儿说了
)。
那么,知道这件事情有什么用途呢?
比方说,你有一些事件需要绑定到某个元素上,那么你需要提供一个link函数,做法请看下一个例子。
5.实例4:一个复杂一点的例子Expander
这是《AngularJS》这本书里面提供的一个例子,但是书里面没有给出完整的可运行代码,所以这里给出来,大家参考一下。
JS代码:
var expanderModule=angular.module(‘expanderModule’, [])
expanderModule.directive(‘expander’, function() {
return {
restrict : ‘EA’,
replace : true,
transclude : true,
scope : {
title : ‘=expanderTitle’
},
template : ‘
+ ‘
+ ‘’
+ ‘
link : function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
}
}
}
});
expanderModule.controller(‘SomeController’,function(scope) {scope.title = ‘点击展开’;
$scope.text = ‘这里是内部的内容。’;
});
HTML代码:
{{text}}
CSS代码:
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
运行效果如下:
注意一下JS代码里面的这一段:
link : function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
}
}
自己跑一跑例子,研究一番,不多解释。
6.实例5:一个综合的例子
JS代码:
var expModule=angular.module(‘expanderModule’,[])
expModule.directive(‘accordion’, function() {
return {
restrict : ‘EA’,
replace : true,
transclude : true,
template : ‘
controller : function() {
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
}
}
});
expModule.directive(‘expander’, function() {
return {
restrict : ‘EA’,
replace : true,
transclude : true,
require : ‘^?accordion’,
scope : {
title : ‘=expanderTitle’
},
template : ‘
+ ‘
+ ‘’
+ ‘
link : function(scope, element, attrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope);
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accordionController.gotOpened(scope);
}
}
}
});
expModule.controller(“SomeController”,function(scope) {scope.expanders = [{
title : ‘Click me to expand’,
text : ‘Hi there folks, I am the content that was hidden but is now shown.’
}, {
title : ‘Click this’,
text : ‘I am even better text than you have seen previously’
}, {
title : ‘Test’,
text : ‘test’
}];
});
HTML代码:
{{expander.text}}
CSS代码:
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
运行效果:
- 《AngularJS》5个实例详解Directive(指令)机制
- [转载]《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- 《AngularJS》5个实例详解Directive(指令)机制
- AngularJS实例详解Directive(指令)机制
- AngularJS 详解Directive(指令)机制
- AngularJS中Directive(指令)机制详解
- Spring mvc 接受页面数据 和 返回页面数据 方法 总结
- 长期更新在线无状态聊天页面
- 什么是QPS,PV,UV,PR
- php基础语法4
- iOS 弹出框自动消失
- 《AngularJS》5个实例详解Directive(指令)机制
- 好雨科技发布SaaS应用市场“云市” 做软件厂商与用户的连接器
- Experimental Plugin 使用向导(转)
- Toast使用大全
- 技术揭秘:海康威视PASCAL VOC2012目标检测权威评测夺冠之道
- Migrating from Eclipse-移植project到studio失败
- Java - String length() Method
- MySQL 行级锁SELECT ... LOCK IN SHARE MODE 和 SELECT ... FOR UPDATE
- (坑)Andriod 旋转屏幕开坑