理解理解AngularJs指令指令
主要介绍了AngularJs指令
对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。
首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法:
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(...) { ... }
}
};
});
1、、restrict[string]
restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A,即以属性的形式来进行声明。
可选值如下:
E(元素)(元素)
<my-directive></my-directive>
A(属性,默认值)(属性,默认值)
<div my-directive="expression"></div>
C(类名)(类名)
<div class="my-directive:expression;"></div>
M(注释)(注释)
<--directive:my-directive expression-->
一般考虑到浏览器的兼容性,强烈建议使用默认的属性就可以即即以属性的形式来进行声明。最后一种方式建议再不要求逼格
指数的时候千万不要用。
Code:
angular.module('app',[])
.directive('myDirective', function () {
return {
restrict: 'E',
template: '<a href="http://www.baidu.com">百度</a>'
};
})
HtmlCode:
<my-directive></my-directive>
效果:
2、、priority[int]
大多数指令会忽略这个参数,使用默认值0,但也有些场景设置高优先级是非常重要甚至是必须的。例如,ngRepeat将这个参
数设置为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用。
3、、terminal[bool]