angular Directive 指令详解

一、定义　

　指令，可以把它简单的理解成在特定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.(限制、约束)

　　restrict是一个可选参数，可选值为 E、A、C、M，可多选，可不选，默认为A。

A：attribute 属性(默认值-default value  推荐使用)，即属性的形式来使用指令，例如：<div my-directive="expression"></div>。

E：element 元素。使用方式 ：<my-directive></my-directive>。

C：class 类名。使用方式：<div class="my-directive:expression;"></div>

M：comment 注释 ，这个貌似没啥用 使用方式<--directive:my-directive expression-->

属性指令良好的兼容性使我们大多采用 A 方式来使用指令。

2.priority.(优先级) 可以设置为一个数值，默认为0，在同一元素上优先级高的指令会被优先调用。同一元素同样优先级的指令顺序调用。不常用

3.terminal(终端，终点--boolean布尔型)值为true或者false; 不常用

　　这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令
　　优先级相同的指令还是会被执行(when the value is true)。

4.template(模板、样本 the value can be string or a function    暂时的--temporary ps:还能学单词。。)不常用。

　　如果模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包
　　含在一个父元素内。换句话说，必须存在一个根DOM元素。下面是2个例子：

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>\

 

 含有多个元素的文本必须用反斜杠\包围.如果只有一个元素则不用，如：

template:'<a href="www.google.com">Click me</a>'

 

 如果值为function。则形式如下：function(tElement, tAttrs) (...},返回一个代表模板的字符串。

5.templateUrl(the value can be string or a function)--常用

　　一般要引入html文本，我们都是在外面定义好一个文本文件，然后用 url(string) 的形式引入。如

templateUrl:“view/modal/example.html”;

function 形式与template，不再赘述。

6先到这里，吃饭后继续。