发布于 2016-01-02 11:07:10 | 432 次阅读 | 评论: 0 | 来源: PHPERZ
AngularJS 前端JS框架
AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
自定义指令在angular中是比较难的一个点,写了这么长时间也只会一些简单的单指令,翻出《用AngularJS开发下一代Web应用》,拿出里面的accordion例子好好啃一下。
这个例子整体比较简单,但是还是需要了解一些点:
自定义指令语法
指令独立作用域:这里双向绑定用=
指令transclude
指令controller:require的controller作为link函数的第四个参数
指令link函数:每个指令都执行一次,而compile只编译一次
很简单的点击一个当前展开,其他折叠
其中expander是从controller中循环出来的
预览:https://jsfiddle.net/savokiss/fh5sv52u/
<accordion>
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
需要两个自定义指令accordion和expander
$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'
}];
只有一个数组,定义了expander的title和text
myModule.directive('accordion',function(){
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
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);
};
}
};
});
这是手风琴菜单的父级指令,他的作用主要为:
expanders
用来存放子指令的数据(即子集scope)
addExpander
方法用来在子指令调用link函数时初始化expanders数组
gotOpened
方法用来提供给子指令关闭其他expander
myModule.directive('expander', function(){
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?accordion',
scope : {
expanderTitle : '='
},
template : '<div>'
+ '<div class="ex-title" ng-click="toggle()">{{expanderTitle}}</div>'
+ '<div class="ex-body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, iElement, iAttrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope);
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accordionController.gotOpened(scope);
};
}
};
});
此指令说明:
require
了accordion指令,所以link函数的最后一个参数就是accordion的controller
独立scope中的expanderTitle
用来双向绑定controller中的title
transclude
用来直接将view中的代码传进来,当然这里只显示了expander的text
link函数提供了flag: scope.showMe
,用来控制expander的展开状态
link函数中初始化showMe
为false,初始化将当前指令的scope添加到父级指令的expander数组中去
提供给自己scope.toggle
方法,用来在切换开关状态,并调用父级指令关闭其他兄弟
基本上就是这些点,全get到就差不多也能写类似的指令了~