自定义指令
angularjs中有许多内置指令，平常都是以ng开首的；比方：ng-app,ng-click,ng-repeat等等。本文引见angularjs的自定义指令的用法。
指令的定义
首先在html标签处设置ng-app的属性值，然后在js文件中就能够挪用angular.module获得一个module，末了就能够用module.directive定义一个指令。代码以下：
html文件
<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
<meta charset="UTF-8">
<title>directive</title>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="./directive.js"></script>
</head>
<body>
<div my-directive></div>
</body>
</html>js文件
var app = angular.module('directive',[]);
app.directive('myDirective',function(){
return {
restrict:"A",
require:true,
template:"<span>hello angular</span>",
};
});这个例子只运用了directive的最简朴的参数设置，下面是一个细致的参数设置列表
app.directive('myDirective', function factory(injectables) {
return {
restrict: string,//指令的运用体式格局，包含标签，属性，类，解释
priority: number,//指令实行的优先级
template: string,//指令运用的模板，用HTML字符串的情势示意
templateUrl: string,//从指定的url地点加载模板
replace: bool,//是不是用模板替代当前元素，若为false，则append在当前元素上
transclude: bool,//是不是将当前元素的内容转移到模板中
scope: bool or object,//指定指令的作用域
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令举行交互的接口函数
require: string,//指定须要依靠的其他指令
link: function postLink(scope, iElement, iAttrs) {...},//以编程的体式格局操纵DOM，包含增添监听器等
compile: function compile(tElement, tAttrs, transclude){
return: {
pre: function preLink(scope, iElement, iAttrs, controller){...},
post: function postLink(scope, iElement, iAttrs, controller){...}
}
}
};
});下面引见几个经常使用的参数
restrict
四个值”A”,”E”,”C”,”M”，离别代码属性，标签，类，解释，以下：
restrict:"A" <div my-directive></div>
restrict:"E" <my-directive></my-directive>
restrict:"C" <div class="my-diretive"></div>
restrict:"M" <!--directive:my-directive-->只测试了A和E的值，感兴趣的朋侪能够测试一下其他。
template 和 templateUrl
这两个参数只须要设置一个就行。
transclude
该参数的意义是替代指令的内容，变动上面的例子。html变动部份
<div my-directive>hello angular</div>js变动部份
app.directive('myDirective',function(){
return {
restrict:"A",
require:true,
transclude:true,//增添transclude参数的设置
template:"<div><span ng-transclude></span></div>",//将指令的内容替代到span标签下
};
});scope
false 默认值。运用父作用域作为本身的作用域
true 新建一个作用域，该作用域继续父作用域
javascript对象 当scope为javascript对象时，键值对的情势定义。直接看例子吧！
html：
<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
<meta charset="UTF-8">
<title>directive</title>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="./directive.js"></script>
</head>
<body>
<div ng-controller="directive">
<div my-directive etitle="title">{{text}}</div>
</div>
</body>
</html>js:
var app = angular.module('directive',[]);
app.directive('myDirective',function(){
return {
restrict:'A',
template:'<div><span style="background-color:red;">{{mytitle}}</span><div ng-transclude></div></div>',
require:true,
replace:true,
transclude:true,
//将etitle属性绑定到父控制器的scope域中
scope:{
mytitle:'=etitle'
},
}
});
app.controller('directive',function($scope){
$scope.title = "进修";
$scope.text = "angular js观点多";
});link
link的值是一个function，平经常使用在在dom上绑定行动的。请看下面完成的一个摺叠面板的例子。
<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
<meta charset="UTF-8">
<title>directive</title>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="./directive.js"></script>
</head>
<body>
<div ng-controller="directive">
<expander etitle="title">{{text}}</expander>
</div>
</body>
</html>var app = angular.module('directive',[]);
app.directive('expander',function(){
return {
restrict:'E',
template:'<div><span style="background-color:red;" ng-click="toggleText()">{{mytitle}}</span><div ng-transclude ng-show="showText"></div></div>',
require:true,
replace:true,
transclude:true,
//将etitle属性绑定到父控制器的scope域中
scope:{
mytitle:'=etitle'
},
link: function(scope,element,attr,accordionCtrl){
scope.showText = false;
scope.toggleText = function(){
scope.showText = ! scope.showText;
}
}
}
});
app.controller('directive',function($scope){
$scope.title = "angular 进修";
$scope.text = "angular js观点多";
});expander指令中的link参数中增添了showText的值和toggleText的点击函数。
末了，再看一个多个摺叠面板的例子
<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
<meta charset="UTF-8">
<title>directive</title>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="./directive.js"></script>
</head>
<body>
<div ng-controller="directive">
<accordion>
<expander ng-repeat="expander in expanders" etitle="expander.title">{{expander.text}}</expander>
</accordion>
</div>
</body>
</html>ng-repeat方便expanders的一切元素
var app = angular.module('directive',[]);
app.directive('expander',function(){
return {
restrict:'E',
template:'<div><span style="background-color:red;" ng-click="toggleText()">{{mytitle}}</span><div ng-transclude ng-show="showText"></div></div>',
require:'^?accordion',
replace:true,
transclude:true,
//将etitle属性绑定到父控制器的scope域中
scope:{
mytitle:'=etitle'
},
link: function(scope,element,attr,accordionCtrl){
scope.showText = false;
accordionCtrl.addExpander(scope);
scope.toggleText = function(){
scope.showText = ! scope.showText;
accordionCtrl.getOpened(scope);
}
}
}
});
app.controller('directive',function($scope){
$scope.expanders = [
{title:"angular",text:"angular js观点多"},
{title:"react",text:"react + reduce + ui路由机制"}
];
});
app.directive('accordion',function(){
return {
restrict:"E",
template:'<div ng-transclude></div>',
replace:true,
transclude:true,
controller:function(){
var expanders = [];
this.getOpened = function(selectExpander){
angular.forEach(expanders,function(e){
if (selectExpander != e){
e.showText = false;
}
});
}
this.addExpander = function(e){
expanders.push(e);
}
}
}
});