一、定义
指令,可以把它简单的理解成在特定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先到这里,吃饭后继续。