angular指令详解--自定义指令

Posted 2020-09-30

自定义指令

directive()这个方法是用来定义指令的：

angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function ($timeout, UserDefinedService) {
// 指令定义放在这里
});

directive() 方法可以接受两个参数：
1. name（字符串）
指令的名字，用来在视图中引用特定的指令。
2. factory_function （函数）
这个函数返回一个对象，其中定义了指令的全部行为。$compile服务利用这个方法返回的对
象，在DOM调用指令时来构造指令的行为。

angular.application(‘myApp‘, [])
.directive(‘myDirective‘, function() {
// 一个指令定义对象
return {
// 通过设置项来定义指令，在这里进行覆写
};
});

　　

angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
return {
restrict: String,　　//使用
priority: Number,　　//优先级
terminal: Boolean,　　//停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。

template: String or Template Function:
function(tElement, tAttrs) (...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }

}
};
});

　　

restrict（字符串）
restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默
认AngularJS认为restrict的值是A，即以属性的形式来进行声明。
可选值如下：
E（元素）
<my-directive></my-directive>
A（属性，默认值）
<div my-directive="expression"></div>
C（类名）
<div class="my-directive:expression;"></div>
M（注释）
<--directive:my-directive expression-->
这些选项可以单独使用，也可以混合在一起使用：
angular.module(‘myDirective‘, function(){
return {
restrict: ‘EA‘ // 输入元素或属性
};
});
上面的配置可以同时用属性或注释的方式来声明指令：
<-- 作为一个属性 -->
<div my-directive></div>
<-- 或者作为一个元素 -->
<my-directive></my-directive>
属性是用来声明指令最常用的方式，因为它能在包括老版本的IE浏览器在内的所有浏览器中
正常工作，并且不需要在文档头部注册新的标签。

terminal（布尔型）
terminal是一个布尔型参数，可以被设置为true或false。
这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令
优先级相同的指令还是会被执行。
如果元素上某个指令设置了terminal参数并具有较高的优先级，就不要再用其他低优先级的
指令对其进行修饰了，因为不会被调用。但是具有相同优先级的指令还是会被继续调用。
使用了terminal参数的例子是ngView和ngIf。ngIf的优先级略高于ngView，如果ngIf的表
达式值为true，ngView就可以被正常执行，但如果ngIf表达式的值为false，由于ngView的优先
级较低就不会被执行。

template（字符串或函数）
template参数是可选的，必须被设置为以下两种形式之一：
? 一段html文本；
? 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符
串。tElement和tAttrs中的t代表template，是相对于instance的。在讨论链接和编译
设置时会详细介绍，模板元素或属性与实例元素或属性之间的区别。
AngularJS会同处理HTML一样处理模板字符串。模板中可以通过大括号标记来访问作用域，
例如{{ expression }}。
如果模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包
含在一个父元素内。换句话说，必须存在一个根DOM元素：
template: ‘\
<div> <-- single root element -->\
<a href="http://google.com">Click me</a>\
<h1>When using two elements, wrap them in a parent element</h1>\
</div>\
另外，注意每一行末尾的反斜线，这样AngularJS才能正确解析多行字符串。在实际生产中，
更好的选择是使用templateUrl参数引用外部模板，因为多行文本阅读和维护起来都是一场噩梦。

templateUrl（字符串或函数）
templateUrl是可选的参数，可以是以下类型：
? 一个代表外部HTML文件路径的字符串；
? 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件
路径的字符串。
无论哪种方式， 模板的URL都将通过AngularJS内置的安全层， 特别是$getTrusted
ResourceUrl，这样可以保护模板不会被不信任的源加载。
默认情况下，调用指令时会在后台通过Ajax来请求HTML模板文件。有两件事情需要知道。
? 在本地开发时，需要在后台运行一个本地服务器，用以从文件系统加载HTML模板，否则
会导致Cross Origin Request Script（CORS）错误。
? 模板加载是异步的，意味着编译和链接要暂停，等待模板加载完成。
通过Ajax异步加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟，可以在部
署应用之前对HTML模板进行缓存。在大多数场景下缓存都是一个非常好的选择，因为AngularJS
通过减少请求数量提升了性能。
模板加载后，AngularJS会将它默认缓存到$templateCache服务中。在实际生产中，可以提
前将模板缓存到一个定义模板的javascript文件中，这样就不需要通过XHR来加载模板了。

replace（布尔型）
replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默
认值意味着模板会被当作子元素插入到调用此指令的元素内部：

<div some-directive></div>
.directive(‘someDirective‘, function() {
return {
template: ‘<div>some stuff here<div>‘
};
});

调用指令之后的结果如下（这是默认replace为false时的情况）：
<div some-directive>
<div>some stuff here<div>
</div>
如果replace被设置为了true：

.directive(‘someDirective‘, function() {
return {
replace: true // 修饰过
template: ‘<div>some stuff here<div>‘
};
});

 

指令调用后的结果将是：
<div>some stuff here<div>