ANGULAR自帶指令有哪些？
1.背景介紹
AngularJS 通過(guò)被稱為 指令 的新屬性來(lái)擴(kuò)展 HTML。 AngularJS 通過(guò)內(nèi)置的指令來(lái)為應(yīng)用添加功能。
AngularJS 允許你自定義指令。
2.知識(shí)剖析
angular指令分為：內(nèi)置指令 && 自定義指令。
內(nèi)置指令：AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。
例如：
√
自定義指令：除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。 你可以使用 .directive 函數(shù)來(lái)添加自定義的指令。 要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
例如：
內(nèi)置指令
angular自帶的指令，共有60多個(gè)。
AngularJS提供了一系列內(nèi)置指令。其中一些指令重載了原生的HTML元素，比如 form 和 a 標(biāo)簽，當(dāng)在HTML中使用標(biāo)簽時(shí)，并不一定能明確看出是否在使用指令。
例如， form 標(biāo)簽被從底層擴(kuò)展了一系列高級(jí)功能，包括表單驗(yàn)證等，原生HTML表單并不會(huì)提供這些功能。其他內(nèi)置指令通常以ng為前綴，很容易識(shí)別。
所有以ng前綴開頭作為命名空間的指令都是AngularJS提供的內(nèi)置指令，因此不要把你自己開發(fā)的指令以這個(gè)前綴命名。
常用的內(nèi)置指令：
ng-app: 使用該指令自動(dòng)啟動(dòng)一個(gè)AngularJS應(yīng)用。ng-app指令指定的應(yīng)用程序的根元素，通常放置在網(wǎng)頁(yè)的根元素如body或html 標(biāo)簽。
ng-controller:該指令用于實(shí)例化指定的控制器對(duì)象。ngController指定一個(gè)Controller類，這個(gè)類控制業(yè)務(wù)邏輯和模型的在視圖的綁定。
ng-class：指定 HTML 元素使用的 CSS 類，ngclass指令允許你動(dòng)態(tài)設(shè)置CSS類在一個(gè)HTML元素的數(shù)據(jù)綁定表達(dá)式，代表所有的類被添加。
ng-click： 定義元素被點(diǎn)擊時(shí)的行為
ng-model: 綁定 HTML 控制器的值到應(yīng)用數(shù)據(jù)
ng-bind:綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)
ng-repeat: 定義集合中每項(xiàng)數(shù)據(jù)的模板
自定義指令
通過(guò)AngularJS模塊API中的.directive()方法，我們可以通過(guò)傳入一個(gè)字符串和一個(gè)函數(shù)來(lái)注冊(cè)一個(gè)新指令。其中字符串是這個(gè)指令的名字，指令名應(yīng)該是駝峰命名風(fēng)格的，函數(shù)應(yīng)該返回一個(gè)對(duì)象,包含了用來(lái)定義和配置指令所需的方法和屬性。
angular.module("myApp", [])
.controller('demoCtrl',function ($scope) {
$scope.aa='as111111'
})
.directive('demoOne',function () {
return{
restrict:"AECM",
template:'',
replace: true,
scope:{},
controller:['$scope',function ($scope) {
$scope.aa='ss1212'
}]
}
})
restrict屬性有4個(gè)值元素（E） 、屬性（A） 、類（C）或注釋（M）用以制定格式來(lái)調(diào)用，可以有不止一種格式，比如 restrict: 'EAC'
replace的值決定它的模板是嵌套入標(biāo)簽中還是取而代之，若replace值為true，則顯示的為
否則默認(rèn)情況下， AngularJS將模板生成的HTML代碼嵌套在自定義標(biāo)簽內(nèi)部。
scope參數(shù)是自定義指令中比較重要的一個(gè)參數(shù)，一共有3個(gè)屬性值：true && false && {}
第一種情況:scope:true
繼承父作用域，并且新建獨(dú)立作用域
第二種情況:scope:false
共享父作用域
第三種情況:scope:{}
不繼承父作用域，創(chuàng)建新的獨(dú)立作用域
3.常見問(wèn)題
指令的優(yōu)先級(jí)
ng-if和ng-show之間的區(qū)別
4.解決方案
指令的優(yōu)先級(jí)
優(yōu)先級(jí)參數(shù)可以被設(shè)置為一個(gè)數(shù)值。大多數(shù)指令會(huì)忽略這個(gè)參數(shù)，使用默認(rèn)值0，但也有些 場(chǎng)景設(shè)置高優(yōu)先級(jí)是非常重要甚至是必須的。例如， ngRepeat將這個(gè)參數(shù)設(shè)置為1000，這樣就可 以保證在同一元素上，它總是在其他指令之前被調(diào)用。 如果一個(gè)元素上具有兩個(gè)優(yōu)先級(jí)相同的指令，聲明在前面的那個(gè)會(huì)被優(yōu)先調(diào)用。如果其中一 個(gè)的優(yōu)先級(jí)更高，則不管聲明的順序如何都會(huì)被優(yōu)先調(diào)用：具有更高優(yōu)先級(jí)的指令總是優(yōu)先運(yùn)行。
ng-if和ng-show之間的區(qū)別
angularJS中的ng-show、ng-hide、ng-if指令都可以用來(lái)控制dom元素的顯示或隱藏。ng-show和ng-hide根據(jù)所給表達(dá)式的值來(lái)顯示或隱藏HTML元素。 當(dāng)賦值給ng-show指令的值為false時(shí)元素會(huì)被隱藏，值為true時(shí)元素會(huì)顯示。ng-hide功能類似，使用方式相反。元素的顯示或隱藏是通過(guò)改變CSS的display屬性值來(lái)實(shí)現(xiàn)的。
ng-if指令可以根據(jù)表達(dá)式的值在DOM中生成或移除一個(gè)元素。如果賦值給ng-if的表達(dá)式的值是false，那對(duì)應(yīng)的元素將會(huì)從DOM中移除， 否則生成一個(gè)新的元素插入DOM中。ng-if同no-show和ng-hide指令最本質(zhì)的區(qū)別是，它不是通過(guò)CSS顯示或隱藏DOM節(jié)點(diǎn)，而是刪除或者新增結(jié)點(diǎn)。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
自定義指令中，作用域之間的數(shù)據(jù)交互是怎么樣的？
修飾符'@' '=' '&'的用法
”＝“：指令中的屬性取值為controller中相應(yīng)$scope上屬性的取值，可用于雙向數(shù)據(jù)的綁定
”@“：指令中的取值為html中的字面量/直接量；建立一個(gè)local scope property到DOM屬性的綁定。
”&“：指令中的取值為Contoller中相應(yīng)$scope上的屬性?？墒沁@屬性必須為一個(gè)函數(shù)回調(diào)
7.參考文獻(xiàn)
angular權(quán)威教程pdf
https://www.gitbook.com/book/xiaoxiami/angularjs/details
angular中文社區(qū)
AngularJS指令參數(shù)詳解
8.更多討論
自定義指令中的link和compile之間的區(qū)別。
文本鏈接：http://www.jnshu.com/daily/23750
PPT鏈接：https://ptteng.github.io/PPT/PPT/JS-08-angular%20directives.html#/
視頻鏈接：https://v.qq.com/x/page/k0503p9oko9.html
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)。快來(lái)與我一起學(xué)習(xí)吧 ！http://www.jnshu.com/login/1/64290793
