angularJS 指令系統

標籤：

指令本質上就是AngularJS擴充具有自訂功能的HTML元素的途徑。
在HTML中要用內建指令ng-app標記出應用的根節點，這個指令需要以屬性的形式來使用，因此可以將它寫到任何位置，但是寫到<html>的開始標籤上是最常規的做法：
所有內建指令的命名空間都使用ng作為首碼。為了防止命名空間衝突，不要在自訂指令前加ng首碼

來建立一個自訂指令

<my-directive></my-directive>

angular.module(‘myApp‘,[])        .directive(‘myDirective‘, function() {            return {                restrict: ‘E‘,                template: ‘<a href="http://google.com">Click me to go to Google</a>‘            };});

運行時，介面中  Click me to go to Google 就代替了<my-directive></my-directive> 標籤

通過AngularJS模組中的.directive()方法，通過傳入一個字串和一個函數來註冊一個新指令。其中字串是這個指令的名字，指令名應該是駝峰命名風格的，函數返回一個對象

directive()方法返回的對象中包含了用來定義和配置指令所需的方法和屬性。

 

內建指令：

基礎 ng 屬性指令：

? ng-href；　　? ng-src；　　

 

// 當 href 包含一個 {{expression}}時總是使用 ng-href <a ng-href="{{ myHref }}">I‘m feeling lucky, when I load</a><img ng-src="{{imgSrc}}"/>

布爾屬性：
? ng-disabled；　　? ng-checked；　　? ng-readonly；
例子：

//當輸入框沒有輸入時，write是null,那麼！write是true，此時按鈕不能點擊，輸入後，!write就是false，可以點擊<input type="text" ng-model="write" placeholder="請輸入"><button  ng-disabled="!write">提交</button>

check和 readonly 同理。

? ng-selected；

 

//check和select 進行綁定<input type="checkbox"    ng-model="isTwoFish"><br/><select>    <option>One Fish</option>    <option ng-selected="isTwoFish">Two Fish</option>    <option >222o Fish</option></select>

 

ng-repeat
ng-repeat用來遍曆一個集合或為集合中的每個元素產生一個模板執行個體。集合中的每個元素都會被賦予自己的模板和範圍。同時每個模板執行個體的範圍中都會暴露一些特殊的屬性。

? $index：遍曆的進度（0...length-1）。
? $first：當元素是遍曆的第一個時值為true。
? $middle：當元素處於第一個和最後元素之間時值為true。
? $last：當元素是遍曆的最後一個時值為true。
? $even：當$index值是偶數時值為true。
? $odd：當$index值是奇數時值為true。

下面的例子展示了如何用$odd和$even來製作一個紅藍相間的列表。 JavaScript中數組
的索引從0開始，因此我們用!$even和!$odd來將$even和$odd的布爾值反轉。

<ul ng-controller="PeopleController">　　<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">　　　　{{person.name}} lives in {{person.city}}　　</li></ul>
.odd {}.even {}angular.module(‘myApp‘,[])　　　　.controller(‘PeopleController‘,function($scope) {　　　　　　　　$scope.people = [　　　　　　　　　　{name: "Ari", city: "San Francisco"},　　　　　　　　　　{name: "Erik", city: "Seattle"}];　　　　});

 

 ng-init　　　　ng-init指令用來在指令被調用時設定內部範圍的初始狀態。

 

{{ }}
<div>{{name}}</div>
{{ }}文法是AngularJS內建的模板文法，它會在內部$scope和視圖之間建立綁定。基於這個綁定，只要$scope發生變化，視圖就會隨之自動更新。
事實上它也是指令，雖然看起來並不像，實際上它是ng-bind的簡略形式，用這種形式不需要建立新的元素，因此它常被用在行內文本中。

　　注意，在螢幕可視的地區內使用{{ }}會導致頁面載入時未渲染的元素髮生閃爍，用ng-bind可以避免這個問題。
<body ng-init="greeting=‘HelloWorld‘">
　　{{ greeting }}
</body>

 

ng-bind

<body ng-init="greeting=‘HelloWorld‘">
　　　　<p ng-bind="greeting"></p>
</body>

 ng-cloak
除使用ng-bind來避免未渲染元素閃爍，還可以在含有{{ }}的元素上使用ng-cloak指令：
<body ng-init="greeting=‘HelloWorld‘">
<p ng-cloak>{{ greeting }}</p>
</body>
ng-cloak指令會將內部元素隱藏，直到路由調用對應的頁面時才顯示出來。

 

ng-bind-template
同ng-bind指令類似， ng-bind-template用來在視圖中綁定多個運算式。
<div
　　ng-bind-template="{{message}}{{name}}">
</div>

 

ng-model
ng-model指令用來將input、 select、 text area或自訂表格單控制項同包含它們的範圍中的屬性進行綁定。它可以提供並處理表單驗證功能，在元素上設定相關的CSS類（ng-valid、ng-invalid等），並負責在父表單中註冊控制項。

它將當前範圍中運算運算式的值同 給定的元素進行綁定。如果屬性並不存在，它會隱式創建並將其添加到當前範圍中。

我們應該始終用ngModel來綁定$scope上一個資料模型內的屬性，而不是$scope上的屬性，這可以避免在範圍或後代範圍中發生屬性覆蓋。  例如：

<input type="text"  ng-model="modelName.someProperty" />　　　　　　$scope.modelName = { someProperty:...}

 ng-show/ng-hide
ng-show和ng-hide根據所給運算式的值來顯示或隱藏HTML元素。當賦值給ng-show指令的值為false時元素會被隱藏。類似地，當賦值給ng-hide指令的值為true時元素也會被隱藏。

<div ng-show="2 + 2 == 5">    2 + 2 isn‘t 5, don‘t show</div><div ng-show="2 + 2 == 4">    2 + 2 is 4, do show</div><div ng-hide="2 + 2 == 5">    2 + 2 isn‘t 5, don‘t hide</div><div ng-hide="2 + 2 == 4">    2 + 2 is 4, do hide</div>

 

ng-if
使用ng-if指令可以完全根據運算式的值在DOM中產生或移除一個元素。如果賦值給ng-if的運算式的值是false，那對應的元素將會從DOM中移除，否則對應元素的一個複製將被重新插入DOM中
ng-if同no-show和ng-hide指令最本質的區別是，它不是通過CSS顯示或隱藏DOM節點，而是真正產生或移除節點。

15. ng-change
這個指令會在表單輸入發生變化時計算給定運算式的值。因為要處理表單輸入，這個指令要和ngModel聯合起來使用

<div ng-controller="EquationController">                <input type="text" ng-model="equation.x" ng-change="change()" />                <code>{{ equation.output }}</code>            </div>var app = angular.module("app",[]);app.controller(‘EquationController‘,function($scope) {        $scope.equation = {};        $scope.change = function() {            $scope.equation.output= parseInt($scope.equation.x) + 2;        };});

只要文本輸入欄位中的內容發生了變化就會改變equation.x的值，進而運行change()函數。

16. ng-form
ng-form用來在一個表單內部嵌套另一個表單。普通的HTML <form>標籤不允許嵌套，但
ng-form可以。
這意味著內部所有的子表單都合法時，外部的表單才會合法。

 

? 表單合法時設定ng-valid；
? 表單不合法時設定ng-invlid；
? 表單未進行修改時設定ng-pristion；
? 表單進行過修改時設定ng-dirty。
Angular不會將表單提交到伺服器，除非它指定了action屬性。要指定提交表單時調用哪個
JavaScript方法，使用下面兩個指令中的一個。
? ng-submit：在表單元素上使用。
? ng-click：在第一個按鈕或submit類型（input[type=submit]）的輸入欄位上使用。

 

18. ng-select
ng-select用來將資料同HTML的<select>元素進行綁定。這個指令可以和ng-model以及
ng-options指令一同使用，構建精細且表現優良的動態表單。

 

ng-options的值可以是下面兩種形式。

? 數組作為資料來源：
? 用數組中的值做標籤；
? 用數組中的值作為選中的標籤；
? 用數組中的值做標籤組；
? 用數組中的值作為選中的標籤組。
? 對象作為資料來源：
? 用對象的鍵?值（key-value）做標籤；
? 用對象的鍵?值作為選中的標籤；
? 用對象的鍵?值作為標籤組；
? 用對象的鍵?值作為選中的標籤組。
下面看一個ng-select指令的執行個體

<div ng-controller="citySelection">                <select ng-model="city" ng-options="city.name for city in cities">                    <option value="">請選擇</option>                </select>            Best City: {{ city.name }}                            </div>app.controller(‘citySelection‘,function($scope) {        $scope.cities = [            {name:"北京"},            {name:"上海"},            {name:"廣州"},            {name:"深圳"}        ]                    });

 

 ng-submit
ng-submit用來將運算式同onsubmit事件進行綁定。這個指令同時會阻止預設行為（發送請求並重新載入頁面）， 除非表單不含有action屬性。

<form ng-submit="submit()" ng-controller="FormController">                Enter text and hit enter:                <input type="text" ng-model="person.name" name="person.name" />                <input type="submit" name="person.name" value="Submit" />                <code>people={{people}}</code>                <ul ng-repeat="(index, object) in people">                    <li>{{ object.name }}</li>                </ul>            </form>app.controller(‘FormController‘,function($scope) {        $scope.person = {name:null};                $scope.people = [];        $scope.submit = function(){            if($scope.person.name){                $scope.people.push({name:$scope.person.name});                $scope.person.name = ‘‘;            }        }                });

 

 ng-class
使用ng-class 動態設定元素的類，方法是綁定一個代表所有需要添加的類的運算式。重複的類不會添加。當運算式發生變化，先前添加的類會被移除，新類會被添加

下面的例子會用ng-class在一個隨機數大於5時將.red類添加到一個div上：

<div ng-controller="LotteryController">                <div ng-class="{red: x > 5}" ng-if="x > 5">                    You won!                </div>                <button ng-click="x = generateNumber()" ng-init="x = 0">Draw Number</button>                <p>Number is: {{ x }}</p>            </div>//如果x的值大於5，那麼 div回事用red的樣式， 如果x的值小於5 ， 那麼就是預設的樣式
app.controller(‘LotteryController‘,function($scope) {        $scope.generateNumber = function(){            return Math.random()*10+1;        }                });

 

angularJS 指令系統