angularjs directive 指令 学习笔记

第一章 directive 常用指令

 

restrict 是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默

认AngularJS认为 restrict 的值是 A ，即以属性的形式来进行声明。

取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；

 

E(元素)：<directiveName></directiveName>

A(属性)：<div directiveName='expression'></div>

C(类)：   <div class='directiveName'></div>

M(注释)：<--directive:directiveName expression-->

 

 

priority

优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但也有些

场景设置高优先级是非常重要甚至是必须的。例如， ngRepeat 将这个参数设置为1000，这样就可

以保证在同一元素上，它总是在其他指令之前被调用。

如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一

个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。

 

 

terminal 是一个布尔型参数，可以被设置为 true 或 false 。

如果元素上某个指令设置了 terminal 参数并具有较高的优先级，就不要再用其他低优先级的

指令对其进行修饰了，因为不会被调用。但是具有相同优先级的指令还是会被继续调用。

 

template （字符串或函数）

templateUrl （字符串或函数）

一个代表外部HTML文件路径的字符串；

一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串。

 

例子

template 字符串例子

定义指令js 

angular.module("app",[]).directive("hello",function(){
return{
restrict:'EA',
template:"<div><h3>hello world</h3></div>"
};
})

  

HTML代码为：

 

<hello></hello>

  

结果渲染后的HTML为：

 

<hello>
<div><h3>hello world</h3></div>
</hello>

  

template 定义方法返回字符串

定义指令js

angular.module("app",[]).directive("directitle",function(){
return{
restrict:'EAC',
template: function(tElement,tAttrs){
var _html = '';
_html += '<div>'+tAttrs.title+'</div>';
return _html;
}
};
})

注意：标签中的属性值。  

 

HTML代码：

<directitle title='biaoti'></directitle>

  

渲染之后的HTML：

<div>biaoti</div>

  

使用缓存存储指令内容例子

<script type='text/ng-template' id='woshimuban.html'>
<div>我是模板内容</div>
</script>

  

angular.module("template.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template.html",
"<div>wo shi mu ban</div>");
}]);

 

 

replace 是一个可选参数，如果设置了这个参数，值必须为 true ，因为默认值为 false 。默

认值意味着模板会被当作子元素插入到调用此指令的元素内部

 

transclude 是一个可选的参数。如果设置了，其值必须为 true ，它的默认值是 false 。

嵌入允许指令的使用者方便地提供自己的HTML模板，其中可以包含独特的状态和行为，并

对指令的各方面进行自定义。

嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。

 

 

第二章 directive 运行顺序

 

 

 

 

 

第三章 directive 作用域

 

scope:当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）

 

scope:当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）

 

scope: 创建指令的作用范围，scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。

 

name: "@" （值传递，单向绑定）： "@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改，是最常用的变量。

 

amount: "=" （引用,双向绑定）: "="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的，包括复合对象和数组。指令可以更改父级Scope中的值，所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。

 

save: "&" (表达式) : “&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。