HTML5代码
<html ng-app="expanderModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
</head>
<body ng-controller='SomeController' >
<accordion>
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
</body>
</html>
angularjs 脚本
var expModule=angular.module(
'expanderModule',[])
expModule.directive(
'accordion',
function() {
console.log(
'output accordion define!');
return {
restrict :
'EA',
replace :
true,
transclude :
true,
template :
'<div ng-transclude></div>',
controller :
function() {
console.log(
'output accordion controller!');
var expanders = [];
this.gotOpened =
function(selectedExpander) {
angular.forEach(expanders,
function(expander) {
if (selectedExpander != expander) {
expander.showMe =
false;
}
});
}
this.addExpander =
function(expander) {
expanders.push(expander);
}
},
link :
function(scope, element, attrs, accdCtrl) {
console.log(
'output accordion link!');
}
}
});
expModule.directive(
'expander',
function() {
return {
restrict :
'EA',
replace :
true,
transclude :
true,
require :
'^?accordion',
scope : {
title :
'=expanderTitle'
},
controller :
function() {
console.log(
'output expander controller!');
},
template :
'<div>'
+
'<div class="title" ng-click="toggle()">{{title}}</div>'
+
'<div class="body" ng-show="showMe" ng-transclude></div>'
+
'</div>',
link :
function(scope, element, attrs, accdCtrl) {
scope.showMe =
false;
accdCtrl.addExpander(scope);
scope.toggle =
function toggle() {
scope.showMe = !scope.showMe;
accdCtrl.gotOpened(scope);
}
console.log(
'output expander link!');
}
}
});
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'
}];
});
注： scope{ title : ‘=expanderTitle’ } 要注意，在js脚本里。需要用驼峰命名法。对应HTML标签时，把中间的大写字母前加一连字符’-‘, 再把大写字母改成小写。 例： 1. expanderTitle 对应html表示为 expander-title 2. expanderSubTitle 对应html表示为 expander-sub-title
scope: { … }
指令会新建一个封闭的作用域。该作用域不会进行原型继承。这样的配置通常是你创建可复用组件的最好选择，因为这指令不会意外地读取或修改父级作用域。然而，有些指令通常需要访问父作用域的数据。设置对象是用来配置父作用域和封闭作用域之间的双向绑定（使用=）或单向绑定（使用@）。这里也可以使用&绑定父作用域上的表达式。所以，这些配置都会将来自父作用域的数据创建到本地作用域属性中。
要注意的是，这些配置选项只是用来设置绑定方式 – 你只能运用Dom元素的属性引入父作用域的属性们，而不可以在配置选项中直接引用。比如你想将父作用域的属性parentProp绑定到封闭的作用域：
和scope: { localProp: ‘@parentProp’}，这不会起作用。我们必须用DOM元素属性定义指令需要绑定的每一个父作用域属性：
和scope: { localProp: ‘@theParentProp’ }。
封闭作用域的proto引用的是一个Scope对象。封闭作用域的$parent指向父作用域，所以，虽然该作用域保持封闭而且不会原型继承于父作用域，但它依旧是一个子作用域。
各指令的调用顺序
output accordion define!
output expander define!
output accordion controller!
output accordion link!
output expander controller!
output expander link!
output expander controller!
output expander link!
output expander controller!
output expander link!
转载请注明原文地址: https://ju.6miu.com/read-1295697.html
