自定义指令(directive)
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, myDirective, 但在使用它时需要以 - 分割, my-directive:
<my-directive></my-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
调用指令:
- 元素名(E)
<my-directive></my-directive>
- 属性(A)
<div my-directive></div>
- 类名(C)
<div class="my-directive"></div>
- 注释(M)
<!-- directive: my-directive -->
注意:
1、可以通过添加 restrict 属性,并设置值,来设置指令只能通过属性的方式来调用
2、指令也可以传参数,放在scope里面
app.directive("myDirective", function() {
return {
restrict : "A",
scope: {
data: '@'
},
template : "<h1>自定义指令!</h1>"
};
});
详细参数配置:
app.directive('myDirective', function () {
return {
restrict: "ECMA",//(字符串)可选参数,指明指令在DOM里面以什么形式被声明;取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;当然也可以两个一起用,比如EA.表示即可以是元素也可以是属性。
priority: 0,//(数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行;
terminal: true,//(布尔型),可选参数,可以被设置为true或false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行)
//【1】(字符串或者函数)可选参数,显示组件内容
// template: '<div><h1>组件内容</h1></div>',
//【2】一个函数,可接受两个参数tElement和tAttrs,其中tElement是指使用此指令的元素,而tAttrs则实例的属性,它是一个由元素上所有的属性组成的集合(对象)
/*template: function(tElement,tAttrs){
var html = '';
html += '<div>' +'hello '+tAttrs.title+'</div>';
return html;
},*/
templateUrl: 'myDirective.html',//(字符串或者函数),可选参数,可以是(1)一个代表HTML文件路径的字符串(2)一个函数,可接受两个参数tElement和tAttrs(大致同上)
//scope:(1)默认值false。表示继承父作用域;(2)true。表示继承父作用域,并创建自己的作用域(子作用域);(3){}。表示创建一个全新的隔离作用域;
scope: {
param: "@",
//可以为@、&、=,<;
/*@绑定,指令属性的值可以使用表达式,但是得出来的值一定是字符串;
&绑定,表示引用绑定,主要绑定父作用域中函数,实现关注点的注入,可以绑定方法函数名
=绑定,表示双向数据绑定
<绑定,表示单向绑定*/
},
transclude: true,//如果不想让指令内部的内容被模板替换,可以设置这个值为true,然后在template里面加入ng-transclude属性;如果指令使用了transclude参数,那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。
controller: 'controllerName',//可以是一个字符串或者函数。若是为字符串,则将字符串当做是控制器的名字,来查找注册在应用中的控制器的构造函数
controllerAs: 'controllerAsName',//控制器别名
//compile和link选项是互斥的。如果同时设置了这两个选项,那么会把compile所返回的函数当作链接函数,而link选项本身则会被忽略。
/*compile: function compile(tElement, tAttrs, transclude) {
console.log(tElement, tAttrs, transclude);
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
console.log(scope, iElement, iAttrs, controller);
},
post: function postLink(scope, iElement, iAttrs, controller) {
console.log(scope, iElement, iAttrs, controller);
}
}
},*/
link: function postLink(scope, iElement, iAttrs) {
console.log("link",(scope, iElement, iAttrs));
}
};
});
//注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("myDirective.html", "<div><h1>组件内容</h1></div><div ng-transclude></div>");
}]);