您的位置：首页 > Web前端 > JavaScript

angulasJS 指令范例

2016-08-13 21:32 218 查看

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', //E-元素，A-属性，C-样式类
replace : true,  //是否把指令替换成结果
//transclude为true, 启用嵌入功能，即当前的指令标签内的内容(或文本，或是其它指令处理过的文本，这里是指accordion标签之内的内容)读取出来之后放入到，template中有ng-transclude标记的标签之中，如下的：<div ng-transclude>放入这里</div>
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: false ：默认值，指令不会新建一个作用域，使用父级作用域。
//scope: true ：指令会创建一个新的子作用域，原型继承于父级作用域。
//scope: { ... } ：指令会新建一个独立作用域，不会原型继承父作用域。
scope : {
title : '=expanderTitle'
},
controller : function() {
console.log('output expander controller!');
},
// 这里的ng-transclude将存放 expander 标签内的{{expander.text}}的内容。
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!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 angularjs directive transclude

相关文章推荐

新的分享

章节导航