指令 Directive

指令系统（Directive）是Angular运用的一个重要特征。

是经由历程对DOM元素的标签丶属性来加强HTML表现力，为其增添一些特定功用。
本篇参考文档Angular菜鸟教程

内置指令

这里引见的是经常运用的一些angularJs内置指令：

1、ng-model

这个是将表单控件和当前作用域的属性举行绑定。须要注重绑定的scope的局限（父scope与子scope）。

ng-model重要绑定的元素包括input， select， textarea 。

ng-model的元素都有：

ng-valid（可用），

ng-invalid （不可用）

ng-pristine（用户为对这个元素举行操纵过），

ng-dirty（元素的模子发作转变的话）属性； 这几个属性都是布尔值。

2、ng-init

该指令被挪用时会初始化内部作用域。平常不发起运用此参数。

3、ng-app

用于通知 AngularJS 运用当前这个元素是根元素。

一切 AngularJS 运用都必需要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只要第一个会被运用。

下边是关于ng-app须要注重的点：

1>这个是必需的。运用该指令自动启动一个AngularJS运用。

2>ngapp指令指定的运用程序的根元素，一般安排在网页的根元素如body或html 标签。

3>只要一个AngularJS运用能够自动指导每一个HTML文档。

4.第一ngapp找到该文件将定义自动指导的根元素的运用。

5>运转多个运用程序在一个HTML文件，您必需手动指导他们运用angular.bootstrap。

6>AngularJS运用不能相互嵌套。

7>你能够指定一个AngularJS模块被用于运用程序的根模块。

8>该模块将被加载到运用程序时，指导到$injector对象中。

9>它应当包括所需的运用程序代码，或依靠于将包括代码的其他模块的依靠关联。

4、ng-controller

用于为你的运用增加控制器。

<element ng-controller="expression"></element>//expression     控制器名。

在控制器中，你能够编写代码，制造函数和变量，并运用 scope 对象来访问。

5、ng-form

Angular表单现实上是Angular供应的Directive，它有一一般名叫ng-form。是这个Directive实例化了一个FormController来担任表单内的页面逻辑（重如果表单考证）。

6、ng-disabled

设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

我们能够在AngularJS中经由历程表达式返回值true/false令其见效。

<input ng-disabled="expression"></input>//expression 如果表达式返回true，则设置为元素增加 disabled 属性。

7、ng-readonly

设置表单输入字段设为只读。

能够经由历程表达式返回值true/false将表单输入字段设为只读。

8、ng-checked

设置是不是选中复选框。

个中 ng-true-value=””” ng-false-value=”””，可用来设置选中时或不选中时对应的值

9、ng-selected

用于设置 <select> 列表中的 <option> 元素的 selected 属性。

ng-selected 属性的表达式返回 true 则选项被选中。

10、ng-show/ng-hide

依据表达式显现/隐蔽HTML元素，注重是隐蔽，不是从DOM移除（ng-if才是移除）

关于大对象的DOM，能够用它，但如果是小对象的DOM，发起运用ng-if

11、ng-change

ng-change 指令用于通知 AngularJS 在 HTML 元素值转变时须要实行的操纵。

ng-change 指令须要搭配 ng-model 指令运用。

AngularJS ng-change 指令指令不会掩盖原生的 onchange 事宜, 如果触发该事宜，ng-change 表达式与原生的 onchange 事宜都邑实行。

ng-change 事宜在值的每次转变时触发，它不须要守候一个完成的修正历程，或守候落空核心的行动。

ng-change 事宜只针对输入框值的实在修正，而不是经由历程 JavaScript 来修正。

12、{{}}

实在这个也是一个指令，或许以为和ng-bind差不多，但页面衬着略慢时能够会被看到。

别的，{{}}的实行远不如ng-bind，只是用起来很轻易。

13、ng-bind

运用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修正了，指定替换的 HTML 元素也会修正。

ng-bind的行动和{{}}差不多，只是我们能够用这个指令来防止FOUC(Flash Of Unrendered Content)未衬着致使的闪灼。

ng-bind-template指令
将给定表达式的值替换 HTML 元素的内容。
当你想在 HTML 元素上绑定多个表达式时能够运用 ng-bind-template 指令。

14、ng-cloak

ng-cloak也能够为我们处理FOUC。 ng-cloak会将内部元素隐蔽，直到路由挪用对应的页面。

FOUC ：文档款式短暂失效

如果运用import要领对CSS举行导入,

会致使某些页面在Windows 下的Internet Explorer涌现一些新鲜的征象:

以无款式显现页面内容的霎时闪灼,这类征象称之为文档款式短暂失效(Flash of Unstyled Content)

存在完全是为了用户体验，

如果一个html界面angular.js还没加载进来，

那末界面会有{{}}如许的标志，如果{{}}标志多了，用户会一脸蒙蔽 啊，

ng-cloak如果加在根节点，那末界面的{{}}会被隐蔽，比及{{}}完全编译成动态数据的时刻界面才可见；

15、ng-if

如果ng-if中的表达式为false，则对应的元素全部会从DOM中移除而非隐蔽，

但检察元素时你能够看到表达式变成解释了。如果相举行隐蔽，能够运用ng-hide。

16、ng-switch

ngSwitch指令包括ng-switch-when、ng-switch-default功用相似switch，

ng-switch-when指前提前提相符将显现这个dom元素，

ng-switch-default指前提都不相符默许显现的元素。

17、ng-repeat

遍历鸠合(数组)，给每一个元素天生模板实例，每一个实例的作用域中能够用一些特别属性，以下

<ul ng-repeat="user in data"><ul>
$index : 示意当前item的索引,
$first : 如果item为第一个，那末$first为true ,
$middle : 如果item不是开首，不是末端$middle为true,
$last : 如果item是末了一个，  $last为true,
$even : 如果索引为偶数， 那末$even为true,否则为false
$odd : 同上， 索引为奇数$odd为true....;

18、ng-src

指令掩盖了 <img> 元素的 src 属性。

如果你运用了 AngularJS 代码设置图片地点，请运用 ng-src 指令替换 src 属性。

ng-src 指令确保的 AngularJS 代码实行前不显现图片。

界面加载的时刻才不论img的标签src有什么

都邑一并加载

如果图片的src包括了{{
**}}这些字符

浏览器不会管这是什么东西

在衬着dom树的时刻

会直接要求这个地点

angular框架是在DOMcontent加载终了后才最先发挥作用。

如果我们模板中有一张图片以下：

<img src=”
http://m.cnblogs.com/142260/”{{imgUrl}}” />

　　那末在页面最先加载到ng编译完成之前，页面上会一向显现一张毛病的图片，因为途径{{imgUrl}}还未被替换。

为了防止这类状况，我们运用ng-src指令，如许在途径被准确获得之前就不会显现找不到图片。同理，a标签的href属性也须要换成ng-href，如许页面上就不会先涌现一个地点毛病的链接。

19、ng-href
掩盖了原生的 a 元素 href 属性。
如果在 href 的值中有 AngularJS 代码，则须要运用 ng-href 而不是 href。
ng-href 指令确保了链接是一般的，纵然在 AngularJS 实行代码前点击链接。

<a href="{{myUrl}}">

20、ng-class

指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值能够是字符串，对象，或一个数组。

如果是字符串，多个类名运用空格分开。

如果是对象，须要运用 key-value 对，key 为你想要增加的类名，value 是一个布尔值。只要在 value 为 true 时类才会被增加。

如果是数组，能够由字符串或对象组合构成，数组的元素能够是字符串或对象。

21、ng-click

点击事宜

<element ng-click="event()"></element>

//
$scope.event=function(){}

22、ngKeyup

23、ngKeydown

24、ngKeypress

25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup

鼠标事宜

26、ngTrim

去除摆布空格

27、ng-include

指令用于包括外部的 HTML 文件。

包括的内容将作为指定元素的子节点。

ng-include 属性的值能够是一个表达式，返回一个文件名。

默许状况下，包括的文件须要包括在同一个域名下。

ng-include指令是指这个指令标签的innerHTML为指定的url

这个url为相对与当前目次的url地点或许相对地点

angular会经由历程ajax要求该地点

然后把地点的内容作为指令元素innerHTML添补；

28、ng-list

指令将字符串转换为数组，并运用逗号分开。

ng-list 指令另有别的一种转换体式格局，如果你有字符串数组愿望在输入框中显现，你能够在 input 上运用 ng-list 指令。

ng-list 属性值定义了分开符。

ng-list这个指令要和ng-model合起来用

ng-list在输入框的表现经由历程split(“,”)的数组才是现实的model

ng-list默许为”,”逗号

要设置成自定义的区分符，直接为ng-list赋值即可;

29、ng-pattren

婚配这个输入框的输入值是不是相符这个正则，如果不婚配，这个元素会被加上ng-invalid的class， 如果婚配会被加上ng-valid的class

在表单校验中为细致引见。。

30、ng-paste ng-copy ng-cut

用于通知 AngularJS 文本在 HTML 元素上粘贴时须要实行的操纵。

ng-paste 指令不会掩盖元素的原生 onpaste 事宜, 事宜触发时，ng-paste 表达式与原生的 onpaste 事宜将都邑实行。

如果输入框的值是粘帖的，那末ng-paste就为真。

ng-copy，ng-cut也是同理

31、ng-non-bindable

　ng-non-bindable指令指该元素的内部{{
**}}不被绑定和转义，不受angular的掌控：

32、ng-open

用于设置 details 列表的 open 属性。

如果 ng-open 的表达式返回 true 则 details 列表是可见的。

这个个人以为和ng-show， g-hide差不多， 区分是ng-open只能绑定details元素，

<details> 标签用于形貌文档或文档某个部份的细节。

（details标签现在只要webkit浏览器支撑）

33、input里的一些属性

novalidate属性（可无值）到form标签上，如许能够保证在表单不正当的状况下阻挠浏览器继续提交数据。

运用 ng-model 属性举行绑定的表单，会自动的增加一些 class 款式，如：

@非必填表单

初始化时会增加 .ng-pristine 和 .ng-valid 两个class款式。当表单为非空时 class 款式会变成 .ng-valid 和 .ng-dirty 。个中将 .ng-pristine 变成了 .ng-dirty 。

@必填表单

初始化时会增加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三个class款式。当表单为非空时 class 款式会变成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。

ngMinLength,，ngMaxLength，ng-parttern，经由历程正则推断input是不是婚配，

表单考证属性：

$dirty 表单有填写纪录

$valid 字段内容正当的

$invalid 字段内容是不法的

$pristine 表单没有填写纪录

ng-change，ng-vlaue就只是设置值罢了 不双向绑定数据

（一样在表单考证中会细致引见）

自定义指令

自定义是AngularJ异常壮大而有有效的功用之一。它就相当于为我们写了大众的自定义DOM元素或Class属性或Attr属性，还能够在它的基本上来操纵scope、绑定事宜、变动款式等。经由历程这个Directive，我们能够封装许多大众指令，比方分页指令、自动补全指令等等。然后在HTML页面里只须要简朴的写一行代码就能够完成许多壮大的功用。
平常状况下，须要用Directive有下面的情形：
1.使你的Html更具语义化，不须要深入研究代码和逻辑即可晓得页面的大抵逻辑。
2.*笼统一个自定义组件，在其他处所举行重用。

指令的属性

先上代码

angular.module("MetronicApp").directive('directiveName', function factory(injectables) {
  var directiveObject = {　　
        priority: 0,
    　　template: '<div>hello<span>world</span></div>',
    　　templateUrl: 'directive.html',
    　　replace: false,
    　　transclude: false,
    　　restrict: 'EA',
    　　scope: false,
    　　link: function postLink($scope, $element, $attrs) {
    　　//code
        }
        controller: ['$scope', function ($scope) {
        //code
        }
   };
   return directiveObject
});

name就是指令名

对应上面代码中的directiveName

restrict 定义指令的涌现情势

（字符串）可选参数，指明指令在DOM内里以什么情势被声明；
取值有：E(元素),A(属性),C(类),M(解释)，个中默许值为A；
固然也能够两个一升引，比方EA.示意即能够是元素也能够是属性。
E(元素)：<directiveName></directiveName>
A(属性)：<div directiveName=’expression’></div>
C(类)： <div class=’directiveName’></div>
M(解释)：<–directive:directiveName expression–>
鉴于浏览器兼容问题。引荐 restrict :’A’,即取值为属性。

scope 作用域，与值绑定

（1）默许值false。示意继续父作用域;
（2）true。示意继续父作用域，并建立本身的作用域（子作用域）;
（3）{}。示意建立一个全新的断绝作用域；
scope: {
　　 lover: ‘=’,
　　 name: ‘@’,
　　 say: ‘&’
　　}
然则，如果我想将父scope中的属性传递给directive的scope怎么办呢？
directive 在运用断绝 scope(新的作用域) 的时刻，供应了三种要领同断绝以外的处所交互：
‘@’ 绑定一个部分 scope 属性到当前 dom 节点的属性值。效果老是一个字符串，因为 dom 属性是字符串。
‘&’ 供应一种体式格局实行一个表达式在父 scope 的高低文中。如果没有指定 attr 称号，则属性称号为雷同的当地称号。
‘=’ 须要完成双向数据绑定的时刻运用。（最常运用）

template模板

能够使一段html代码。

template: '<div>hello<span>world</span></div>',

也能够是一个实例函数：
个中$element,是指运用此指令的元素，而$element,则实例的属性，它是一个由元素上一切的属性构成的鸠合（对象）

<div directive-name title="我是title"></div>
////////
template: function($element, $attrs){ 
   var _html = ''; 
   _html += '<div>' +'hello '+ $attrs.title+'</div>'; //这里的title就是这个指令里的title属性。
   return _html; 
   } 
 }; 

一样有很明显的一个瑕玷，你也能够将全部template写得很庞杂，然则，庞杂的代码异常不容易保护。而且你还得换行，得用字符串拼接每一行。太长的template发起运用templateUrl替代。

templateUrl模板

templateUrl为从指定地点猎取模板内容。即你要在指令地点的容器中插进去的一个.html文件。
当运用templateUrl模板时，须要运转一个服务器，不然运用templateUrl会报错 Cross Origin Request Script（CORS）毛病。
因为加载html模板是经由历程异步加载的，若加载大批的模板会拖慢网站的速率，项目中对模板举行了缓存，是可取之处。以下

<script type='text/ng-template' id='directive.html'> 
   <div>
     <h1>Hello World</h1>
     <div>{{name}}</div>
   </div> 
</script> 

这里的id属性就是被设置在templateUrl上用的。
这里的templateUrl相似于JSP中的include。有无邃晓一点。

replace

是不是用模板替换当前元素。
true : 将指令标签替换成temple中定义的内容,页面上不会再有<directive-name>标签；
false ：则插进去当前元素内，即模板的内容包在<directive-name>标签内部。默许false。

transculde：

是不是运用ng-transculde来包括html中指令包括的原有的内容，吸收两个参数true/false。默许值为false；
这个设置选项能够让我们提取包括在指令谁人元素内里的内容，再将它安排在指令模板的特定位置。当你开启transclude后，你就能够运用ng-transclude来指清楚明了应当在什么处所安排transcluded内容。
有些高阶的东西，用的不好就是bug。

link

能够简朴明白为，当改自定义指令被angular 编译后，实行该要领。
重要的三个参数
$scope(当前指令内部作用域，和scope绑定有关),
$element(指的是html中的指令标签的对象，能够明白成$（’directive对象’），相似jquery的选择器。),
$attrs(指令元素的属性的鸠合)
link在angular编译后实行
link函数重要用于操纵dom元素,给dom元素绑定事宜和监听.

controller

同link的区分在于
controller操纵的是营业逻辑。所以一般运用的只要$scope参数。而且能够经由历程注入体式格局依靠其他模块。
以下

controller: ['$scope', '$location','UrlConfigService', function ($scope, $location,UrlConfigService) {
    $scope.onActionClick = function (row, parentMethod) {
            //code
        };
}

compile

这个是在angular编译阶段实行的要领。compile在编译前实行，目标是担任把template（包括transclude所援用的）变成一个完全的DOM构造。

关于angular的编译历程这里给人人一个链接，可做相识。angular编译及生命周期

priority

多个指令设置在同一个元素上的实行优先级,实行递次从低高:1>2>3；
priority的值为正整数，比方priority: 1,

ngHello的优先级一定要高于ngWorld，不过现实中没人这么用，这里只做解说。

angular.module("MetronicApp").directive("ngHello",function(){ 
 return{ 
  restrict: 'EA',
  priority: 1,
  link : function(){
   //code
  }   
 }; 
})

angular.module("MetronicApp").directive("ngWorld",function(){ 
 return{ 
  restrict: 'EA',
  priority: 2,
  link : function(){
   //code
  }   
 }; 
})

terminal

两个参数true/false 如果为true,本指令的优先级高于同一个元素上的其他指令，其他指令将住手实行。一样现实中不运用，只做相识。

angular.module("MetronicApp").directive("ngBook",function(){ 
 return{ 
  restrict: 'EA',
  priority: 3,
  terninal: true, //这里为true,ngHello和ngWorld都将住手实行
  link : function(){
   //code
  }   
 }; 
})

指令的部份先引见到这，如果在以后的实践中有发明不足和缺失再继续完美。此篇是让人人对指令有个范例相识。在项目中轻易明白指令用法。比方table列表带分页（ng-table），查询列表（ng-tableinput） 展现列表（ng-list）（industry-field） 。也轻易在以后本身封装，拆分一些大众功用模块。