JS AngualrJs 指令

本文基于 AngularJs 1.x 版本

内置指令

 

布尔属性

根据HTML标准的定义，布尔属性表明一个 true 或 false 值。

当这个属性出现时，这个属性的值就是 true （不管实际定义的值是什么）。若是未出现，这个属性的值就是 false 。

所以，AngularJS 提供了一组带有 ng- 前缀的布尔属性，经过运算表达式的值来决定在目标元素上是插入仍是移除对应的属性。

 

ng-disabled
使用 ng-disabled 能够把 disabled 属性绑定到如下表单输入字段上：
input （ text 、 checkbox 、 radio 、 number 、 url , email 、 submit ）
textarea | select | button

 

ng-readonly

能够将某个返回真或假的表达式同是否出现 readonly 属性进行绑定

 

ng-checked

标准 checked 属性是一个布尔属性，不须要进行赋值，经过 ng-checked 将某个表达式同是否出现 checked 属性进行绑定。

ng-selected

能够对是否出现 option 标签的 selected 属性进行绑定

类布尔属性

ng-href | ng-src | ng-class |ng-style

 

ng-app 和 ng-controller

ng-app 和 ng-controller 是特殊的指令，由于它们会修改嵌套在它们内部的指令的做用域。
ng-app 为AngularJS应用建立 $rootScope。
ng-controller 则会以 $rootScope 或另一个 ng-controller 的做用域为原型建立新的子做用域。
任何具备 ng-app 属性的DOM元素将被标记为 $rootScope 的起始点。
$rootScope 是做用域链的起始点，任何嵌套在 ng-app 内的指令都会继承它。
在 JavaScript 代码中经过 run 方法来访问 $rootScope 。
内置指令 ng-controller 是为嵌套在其中的指令建立一个子做用域，避免将全部操做和模型都定义在 $rootScope 上。
用这个指令能够在一个DOM元素上放置控制器。
ng-controller 接受一个参数 expression ，这个参数是必需的。expression 参数是一个AngularJS表达式
子 $scope 只是一个JavaScript对象，其中含有从父级 $scope 中经过原型继承获得的方法和属性，包括应用的 $rootScope。
嵌套在 ng-controller 中的指令有访问新子 $scope 的权限，可是要牢记每一个指令都应该遵照的和做用域相关的规则。

 

ng-include

使用 ng-include 能够加载、编译并包含外部HTML片断到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下
在同一个元素上添加 onload 属性能够在模板加载完成后执行一个表达式
使用 ng-include 时AngularJS会自动建立一个子做用域。
若是你想使用某个特定的做用域，必须在同一个DOM元素上添加 ng-controller ="ControllerA"指令。

 

ng-switch 

ng-switch 指令和 ng-switch-when 及 on="propertyName" 一块儿使用，能够在 propertyName 发生变化时渲染不一样指令到视图中
在 switch 被调用以前用 ng-switch-default 来输出默认值

 

ng-view

ng-view 指令用来设置将被路由管理和放置在HTML中的视图的位置

 

ng-if

使用 ng-if 指令能够彻底根据表达式的值在DOM中生成或移除一个元素。
ng-if 同 ng-show 和 ng-hide 指令最本质的区别是，它不是经过CSS显示或隐藏DOM节点，而是真正生成或移除节点

 

ng-repeat

ng-repeat 用来遍历一个集合或为集合中的每一个元素生成一个模板实例。
集合中的每一个元素都会被赋予本身的模板和做用域。同时每一个模板实例的做用域中都会暴露一些特殊的属性。
$index ：遍历的进度（0... length-1 ）。
$first ：当元素是遍历的第一个时值为 true 。
$middle ：当元素处于第一个和最后元素之间时值为 true 。
$last ：当元素是遍历的最后一个时值为 true 。
$even ：当 $index 值是偶数时值为 true 。
$odd ：当 $index 值是奇数时值为 true

 

ng-init

ng-init 指令用来在指令被调用时设置内部做用域的初始状态

语法是AngularJS内置的模板语法，它会在内部 $scope 和视图之间建立绑定。
事实上它也是指令，虽然看起来并不像，实际上它是 ng-bind 的简略形式，用这种形式不须要建立新的元素，所以它常被用在行内文本中。
注意，在屏幕可视的区域内使用 会致使页面加载时未渲染的元素发生闪烁，用 ng-bind 能够避免这个问题。

除使用 ng-bind 来避免未渲染元素闪烁，还能够在含有 的元素上使用 ng-cloak 指令：
ng-cloak 指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。

 

ng-model

ng-model 指令用来将 input 、 select 、 text area 或自定义表单控件同包含它们的做用域中的属性进行绑定。

它能够提供并处理表单验证功能，在元素上设置相关的CSS类（ ng-valid 、ng-invalid 等），并负责在父表单中注册控件。
它将当前做用域中运算表达式的值同给定的元素进行绑定。若是属性并不存在，它会隐式建立并将其添加到当前做用域中。
咱们应该始终用 ngModel 来绑定 $scope 上一个数据模型内的属性，而不是 $scope 上的属性，这能够避免在做用域或后代做用域中发生属性覆盖。

 

ng-show 和 ng-hide

ng-show 和 ng-hide 根据所给表达式的值来显示或隐藏HTML元素。

 

ng-change 

ng-change 指令会在表单输入发生变化时计算给定表达式的值。这个指令须要和 ngModel 联合起来使用。

 

ng-form

ng-form 用来在一个表单内部嵌套另外一个表单。
普通的HTML form 标签不容许嵌套，但 ng-form 能够。
这意味着内部全部的子表单都合法时，外部的表单才会合法。验证须要name属性。
下面的CSS类会根据表单的验证状态自动设置：
合法时设置 ng-valid | 不合法时设置 ng-invlid | 未进行修改时设置 ng-pristion | 进行过修改时设置 ng-dirty
Angular 不会将表单提交到服务器，除非它指定了 action 属性。

要指定提交表单时调用哪一个 JavaScript方法，使用下面两个指令中的一个。

ng-submit ：在表单元素上使用 | ng-click ：在第一个按钮或 submit 类型（ input[type=submit] ）的输入字段上使用。

ng-click 用来指定一个元素被点击时调用的方法或表达式。

ng-select 用来将数据同HTML的 select 元素进行绑定。这个指令能够和 ng-model 以及 ng-options 指令一同使用，构建精细且表现优良的动态表单。

ng-submit 用来将表达式同 onsubmit 事件进行绑定。这个指令同时会阻止默认行为（发送请求并从新加载页面），除非表单不含有 action 属性。

 

ng-class

使用 ng-class 动态设置元素的类，方法是绑定一个表明全部须要添加的类的表达式。
重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。

 

ng-attr-(suffix)
当 AngularJS 编译 DOM 时会查找花括号内的表达式。
这些表达式会被自动注册到 $watch 服务中并更新到 $digest 循环中，成为它的一部分
有时浏览器会对属性会进行很苛刻的限制，这时咱们就可使用该指令绑定一个花括号表达式。

 

指令详解

 

directive(name,factory_function)

能够接受两个参数：

1. name （字符串） 指令的名字，用来在视图中引用特定的指令。
2. factory_function （函数） 这个函数返回一个对象，其中定义了指令的所有行为。 $compile 服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

咱们也能够返回一个函数代替对象来定义指令，可是经过对象来定义是最佳的方式。
当返回一个函数时，这个函数一般被称做连接传递（postLink）函数，利用它咱们能够定义指令的连接（link）功能。
因为返回函数而不是对象会限制定义指令时的自由度，所以只在构造简单的指令时才比较有用。

AngularJS编译器会解析主HTML的DOM中的元素、属性、注释和CSS类名中使用了这个名字的地方，并在这些地方引用对应的指令。
当它找到某个已知的指令时，就会在页面中插入指令所对应的DOM元素。

当AngularJS在DOM中遇到具名的指令时，会去匹配已经注册过的指令，并经过名字在注册过的对象中查找。
此时，就开始了一个指令的生命周期，指令的生命周期开始于 $compile 方法并结束于 link 方法

 

一个指令时可使用的所有设置选项：

 1 angular.module('myApp', [])
 2     .directive('myDirective', function () {
 3         return {
 4             restrict: String,
 5             priority: Number,
 6             terminal: Boolean,
 7             template: String or Template Function: function (tElement, tAttrs)(...
 8             },
 9             templateUrl: String,
10             replace: Boolean or String,
11             scope: Boolean or Object,
12             transclude: Boolean,
13             controller: String or
14             function (scope, element, attrs, transclude, otherInjectables) { ...
15             },
16             controllerAs: String,
17             require: String,
18             link: function (scope, iElement, iAttrs) { ...
19             },
20             compile: // 返回一个对象或链接函数，以下所示：
21                 function (tElement, tAttrs, transclude) {
22                     return {
23                         pre: function (scope, iElement, iAttrs, controller) { ...
24                         },
25                         post: function (scope, iElement, iAttrs, controller) { ...
26                         }
27                     }
28                     // 或者
29                     return function postLink(...) { ...
30                     }
31                 }
32         };
33     });

 

restrict 
restrict 是一个可选的参数。
它告诉AngularJS这个指令在DOM中能够何种形式被声明。默认AngularJS认为 restrict 的值是 A ，即以属性的形式来进行声明。
可选值以下：

E（元素）| A（属性，默认值）| C（类名）| M（注释）

这些选项能够单独使用，也能够混合在一块儿使用，属性是用来声明指令最经常使用的方式，由于它能在包括老版本的IE浏览器在内的全部浏览器中正常工做

 

priority

priority 优先级参数能够被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是很是重要甚至是必须的。
例如， ngRepeat 将这个参数设置为1000，这样就能够保证在同一元素上，它老是在其余指令以前被调用。
若是一个元素上具备两个优先级相同的指令，声明在前面的那个会被优先调用。
若是其中一个的优先级更高，则无论声明的顺序如何都会被优先调用：具备更高优先级的指令老是优先运行。

 

terminal

terminal 是一个布尔型参数，能够被设置为 true 或 false 。
这个参数用来告诉AngularJS中止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令仍是会被执行。
若是元素上某个指令设置了 terminal 参数并具备较高优先级，就不要再用其余低优先级的指令对其进行修饰了，由于不会被调用。

 

template

template 参数是可选的，必须被设置为如下两种形式之一：
一段HTML文本 | 一个能够接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个表明模板的字符串。
若是模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包含在一个父元素内。换句话说，必须存在一个根DOM元素
每一行末尾加上反斜线，这样 AngularJS 能正确解析多行字符串。在实际生产中，
更好的选择是使用 templateUrl 参数引用外部模板，由于多行文本阅读和维护起来都是一场噩梦。

 

templateUrl 

templateUrl 是可选的参数，能够是如下类型：
一个表明外部HTML文件路径的字符串 | 一个能够接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串。

 

replace 

replace 是一个可选参数，若是设置了这个参数，值必须为 true ，由于默认值为 false 。
默认值意味着模板会被看成子元素插入到调用此指令的元素内部

 

scope 

scope 参数是可选的，能够被设置为 true 或一个对象。默认值是 false 。
当 scope 设置为 true 时，会从父做用域继承并建立一个新的做用域对象。
若是一个元素上有多个指令使用了隔离做用域，其中只有一个能够生效。只有指令模板中的根元素能够得到一个新的做用域。所以，对于这些对象来讲 scope 默认被设置为 true 。
隔离做用域多是 scope 属性三个选项中最难理解的一个，但也是最强大的。
具备隔离做用域的指令最主要的使用场景是建立可复用的组件，组件能够在未知上下文中使用，而且能够避免污染所处的外部做用域或不经意地污染内部做用域。
建立具备隔离做用域的指令须要将 scope 属性设置为一个空对象 {} 。若是这样作了，指令的模板就没法访问外部做用域了
使用无数据的隔离做用域并不常见。AngularJS提供了几种方法可以将指令内部的隔离做用域，同指令外部的做用域进行数据绑定。
值传递绑定： @ (or @attr)
双向数据绑定：= (or =attr) 就像普通的数据绑定同样，本地属性会反映出父数据模型中所发生的改变。
父级做用域绑定： & (or &attr) 能够对父级做用域进行绑定，在其中运行函数。意味着对这个值进行设置时会生成一个指向父级做用域的包装函数。要调用带有一个参数的父方法，咱们须要传递一个对象，这个对象的键是参数的名称，值是要传递给参数的内容。

 

transclude

transclude 是一个可选的参数。若是设置了，其值必须为 true ，它的默认值是 false 。
嵌入一般用来建立可复用的组件，典型的例子是模态对话框或导航栏

 

controller 

controller 参数能够是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数
控制器中有一些特殊的服务能够被注入到指令当中。这些服务有：
$scope 与指令元素相关联的当前做用域 | $element 当前指令对应的元素 | $attrs 由当前元素的属性组成的对象 | $transclude 嵌入连接函数会与对应的嵌入做用域进行预绑定。
指令的控制器和 link 函数能够进行互换。
控制器主要是用来提供可在指令间复用的行为，但连接函数只能在当前内部指令中定义行为，且没法在指令间复用。

 

controllerAs 

controllerAs 参数用来设置控制器的别名，能够以此为名来发布控制器，而且做用域能够访问 controllerAs 。这样就能够在视图中引用控制器，甚至无需注入 $scope 。

 

require 

require 参数能够被设置为字符串或数组，字符串表明另一个指令的名字。 require 会将控制器注入到其值所指定的指令中，并做为当前指令的连接函数的第四个参数
字符串或数组元素的值是会在当前指令的做用域中使用的指令名称。
require 参数的值能够用下面的前缀进行修饰，这会改变查找控制器时的行为：
? 若是在当前指令中没有找到所须要的控制器，会将 null 做为传给 link 函数的第四个参数。
^ 若是添加了 ^ 前缀，指令会在上游的指令链中查找 require 参数所指定的控制器。
?^ 将前面两个选项的行为组合起来，咱们可选择地加载须要的指令并在父指令链中进行查找。
没有前缀 若是没有前缀，指令将会在自身所提供的控制器中进行查找，若是没有找到任何控制器（或具备指定名字的指令）就抛出一个错误。

 

compile 

compile 选项能够返回一个对象或函数。compile 选项自己并不会被频繁使用，可是 link 函数则会被常用。本质上，当咱们设置了 link 选项，其实是建立了一个 postLink() 连接函数，以便 compile() 函数能够定义连接函数。一般状况下，若是设置了 compile 函数，说明咱们但愿在指令和实时数据被放到DOM中以前进行DOM操做，在这个函数中进行诸如添加和删除节点等DOM操做是安全的。compile 和 link 选项是互斥的。若是同时设置了这两个选项，那么会把 compile 所返回的函数看成连接函数，而 link 选项自己则会被忽略。