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 選項自己則會被忽略。