自定义指令（directive）

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive:

调用指令：

• 元素名（E）

• 属性（A）

• 类名（C）

• 注释（M）

注意：

1、可以通过添加 restrict 属性,并设置值，来设置指令只能通过属性的方式来调用

2、指令也可以传参数，放在scope里面

app.directive("myDirective", function() {return {restrict : "A",scope: {data: '@'},template : "
自定义指令!
"};
});

详细参数配置：

app.directive('myDirective', function () {return {restrict: "ECMA",//（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。priority: 0,//(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；terminal: true,//（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)//【1】（字符串或者函数）可选参数，显示组件内容// template: '
组件内容
',//【2】一个函数，可接受两个参数tElement和tAttrs，其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）/*template: function(tElement,tAttrs){var html = '';html += '' +'hello '+tAttrs.title+'';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", "
组件内容
");
}]);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！