参考更多1
参考更多2
Directive的目的:
- 使你的Html更具语义化。
- 抽象一个自定义组件，在其他地方进行重用。
.directive 函数
使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，directiveName, 但在使用它时需要以 - 分割, directive-name
//一个常见的directive实例
boys
angular.module('myApp',['myModule']);
angular.module('myModule',[])
.directive('directiveName', ['$rootScope',function ($rootScope) {//此处注入服务
return {
template: "hello ", //hello boys
templateUrl: 'directive.html', //用于代替template,一般会进行模板缓存
replace: true, //使 标签被template彻底取代,并获得其属性,class等;未设置template时不会取代内部内容
require:'^?ngModel',//获取其他指令中控制器并作为link的第四个参数
transclude: true, //使原html中的boys置入
restrict: 'EA',
scope: false, //默认值,双向绑定
controller:function($scope, $element, $attrs, $transclude) { ... },
compile: function (tElement, tAttrs, transclude) {
return {
pre: function (scope, iElement, iAttrs, controller) { ... },
post: function (scope, iElement, iAttrs, controller) { ... }
}
},
link: function (scope, iElement, iAttrs) { ... }
//执行顺序:directive之外的controller,derective内的compile,controller,(pre,post)link
//(pre和post为link的两个阶段,故有compile时link函数不执行改为执行pre和post)
//且每个阶段都是先执行父再执行子,全部执行完毕后再开始下个阶段
};
}]);
restrict
可选参数，指令在DOM中声明的形式；取值如下 :
E(元素)：
A(属性)：
C(类)：
M(注释)：<--directive:directiveName expression-->
其中默认值为A；也可以多个一起用，如EA表示即可以元素也可以属性。priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；terminal
（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令无效，不会被调用-
template
（字符串或者函数）可选参数，- 字符串： ''
Hi 我是林炳文~~~
- 函数：
- 字符串： '
template: function(tElement,tAttrs){
var _html = '';
_html += '' +'hello '+tAttrs.title+'';
return _html;
}
其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）形如：
其中title就是tattrs上的属性
- templateUrl
（字符串或者函数），可选参数，可以是
（1）一个代表HTML文件路径的字符串
（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）
注意：在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。
模板缓存
由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板
- 通过 script 标签引入
- 通过使用 $templateCache 来实现(可通过grunt-angular-templates自动生成)
app.run(["$templateCache", function($templateCache) {
$templateCache.put("hello.html",
"Hi 我是林炳文~~~
");
}]);
则都用 templateUrl: 'hello.html'即可调用,甚至ng-include=" ' hello.html ' "也可以调用
replace
（布尔值），默认值为false，如replace 为true，则将模版(template)内容替换当前的自定义HTML元素，并将原来元素的属性、class一并迁移。scope
- 为true或false时,直接与父作用域交互(包括标签内属性和template内容),为{}时与父隔离,只能借助该指令所在标签的属性与父作用域交互
- 默认值false。表示继承父作用域(相互影响);
- true。表示继承父作用域，并创建子作用域（父影响子,子不影响父）;
- {}。表示创建一个全新的隔离作用域(相互不影响)；
一旦使用{},则仅能通过模板标签的属性值传递信息;- 仅有符号无值时,默认名称即属性名。
- = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。父子相互影响
{{name}}
- @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。父影响子,子不影响父
{{name}}
- & 提供一种方式使可以调用父中的function。如果没有指定 attr 名称，则属性名称为相同的本地名称。
var app = angular.module('myApp', []);
app.controller("myController", function ($scope) {
$scope.value = "hello world";
$scope.click = function () {
$scope.value = Math.random();
}
}).directive("isolatedDirective", function () {
return {
scope: {
action: "&"
},
template: ''
}
})
- transclude
可选参数,默认为false;
如果不想让指令内部的内容被模板替换，可以设置为true。此时需要在template中配合ngTransclude指令,如:
template:"hello every "
则原来html中的内容置入该
中注意, transclude不为true时不能有 ng-transclude 属性,否则报错
- controller
可以是一个字符串或者函数。
若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数(应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件)
- 作用域可视为直接绑定在
的controller的子作用域
- link与compile
- compile期间是对指令的模板进行转换。
- controller期间处理业务逻辑,数据交互。
- link期间是在模型和视图之间建立联系,加载变量进dom,绑定和触发事件等，scope在link阶段才会被绑定到元素上，所以在compile阶段操作scope会报错。
- 一般只操作link即可,实在需要复用则使用controller属性
- link和compile中的scope等价于controller中的$scope
- require
详见:Directive的require属性与Angular的表单验证