一、结构
angular.module
- controller / run
- filter / directive
自定义指令与自定义过滤器是非常类似的。
app.directive():接收两个参数:
(1)自定义指令的名称;
(2)自定义指令的回调处理函数。与自定义filter类似。
二、配置选项
1. restrict:
指定当前指令的类型。有四种类型:
(1) ‘E’:标签
element的缩写,代表当前指令是标签指令
<pre>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('hello',function(){
return{
restrict:'E',
template:"<div>Hello,angular!</div>"
}
});
app.controller('Aaa',['$scope',function($scope){
}])
</script>
</head>
<body>
<hello></hello>
<div ng-controller="Aaa"></div>
</body>
</html>
</pre>
运行结果如下图所示:
(2)’A’:attribute:属性
指定当前指令为属性指令
<pre>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('hello',function(){
return{
/*restrict:'E',*/
restrict:'A',
template:"<div>Hello,angular!</div>"
}
});
app.controller('Aaa',['$scope',function($scope){
}])
</script>
</head>
<body>
<!--此时这个标签指令就不能被解析-->
<hello></hello>
<p hello></p>
<div ng-controller="Aaa"></div>
</body>
</html>
</pre>
运行结果如下图所示:
注意:指令类型是可以组合使用的。若想实现上述代码中的指令标签和属性标签都能被解析,可以将restrict配置选项设置为:”restrict:’AE’”。
restrict的值必须是大写的,小写是不会起作用的。
(3)’C’:class指令
restrict:'E'
,<p class="hello"></p>
修改上述代码。运行结果如下图所示:
(4)’M’:注释
<pre>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('hello',function(){
return{
restrict:'AEM',
//replace的值必须设置为true,否则注释写法无效 replace:true,
template:"<div>Hello,angular!</div>"
}
});
app.controller('Aaa',['$scope',function($scope){
}])
</script>
</head>
<body>
<!--最后一个字符必须要有一个空格,否则不起作用-->
<!-- directive:hello -->
<div ng-controller="Aaa"></div>
</body>
</html>
</pre>
指令的模版内容会代替注释内容,运行结果如下:
总结:
a.后两种指令类型用的比较少,class指令容易与标签的class属性混淆,注释指令也容易混淆;前两种用的比较多,标签指令和属性指令。
b.标签指令一般用来重写标签,用模版内容代替标签;属性标指令一般用来做成功能性的指令,类似ng-show
c.若指令名称是多个单词,语法规则是:
app.directive('myHello',function(){...}
,此处是驼峰;html里写法是:<my-hello></my-hello>
。注意:“ng-”开头的指令是angularJS内置的指令,我们自定义的指令命名应该尽可能避开。
2. template:模版
用于为自定义指令添加模版。
3. replace
因为默认会将模版内容解析到所在标签内部。如果将这个值设为true,就会用模版替换所在指令的所在标签。运行结果如下图所示:
4.templateUrl:模板路径
当模板的内容比较多的情况下,会有一个问题,就是写起很不方便,可以采用templateUrl的方式来解决,它可以指定外部模板的页面路径。
angular-directive.html:
<pre>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 div{
width: 200px;
height:200px;
border: 1px solid red;
display: none;
}
#div1 input.active{
background-color: red;
}
</style>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var m1= angular.module("myApp",[]);
m1.directive("myTab",function(){
return{
restrict:"E",
replace:true,
//字符串不能直接断行,不过有很多方法可以解决。例如下面这种:使用“\”斜杠符号进行字符串累加
/* template:'<div id="div1">\
<input type="button" value="1" class="active"/>\
<input type="button" value="2"/>\
<input type="button" value="3"/>\
<div style="display: block">11111</div>\
<div>22222</div>\
<div>33333</div>\
</div>'*/
templateUrl:'temp1.html'
};
});
</script>
</head>
<body>
<my-tab></my-tab>
</body>
</html>
</pre>
temp1.html:
<pre>
<div id="div1">
<input type="button" value="1" class="active"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
</pre>
结论:运行效果与将模板直接写在template选项中一样。