《Angular JS 權威教程》內建指令

一、基礎ng指令

1.ng-disable，使用ng-disabled可以把disabled屬性繫結到以下表單輸入欄位上:

  ;
 ; ;


普通html，在以下表單控制項中只要出現了disable屬性就會禁用該控制項，而使用ng-disable時只有當屬性值為true時才會禁用繫結的控制項。

2.與ng-disable類似的還有ng-checked、ng-readonly、ng-selected。

3.ng-href，動態建立url時，應該使用ng-href來代替普通html的href，避免動態生成鏈結時url對應的值未生成而造成404，使用ng-href時，angularjs會等待url對應的值生成後執行響應。

4.與ng-href類似的還有ng-src，用於等資源的載入時，先判斷資源表示式是否生效才載入對應資源。

二、在指令中使用子作用域2.ng-controller，為巢狀在其中的指令建立乙個新的作用域，避免將所有的操作都定義在$rootscope中。

3.ng-include，載入、編譯幷包含外部的html片斷到當前應用中，使用ng-include需要考慮跨域資源共享（cross-origin resoure sharing,cors)以及同源原則（same origin policy）,以保證引入內容能正常載入。

4. ng-switch ,和ng-switch-when、on=」propertyname」一起使用，示例：

type="text"
ng-model="person.name"/>
ng-switch
on="person.name">
ng-switch-default>and the winner isp>
ng-switch-when="ari">
}h1>
div>

5.ng-if，根據表示式的值生成或移除dom元素，ng-if和ng-show、ng-hide指令本質區別是它不是通過css來隱藏或顯示元素，而是真正的生成和移除節點，移除時會將其作用域及css之類屬性也同時移除。

6.ng-repeate，用於迭代乙個集合或為集合中每個元素生成乙個模板例項。

 $index:遍歷的進度(0...length-1)。  $first:當元素是遍歷的第乙個時值為true。  $middle:當元素處於第乙個和最後元素之間時值為true。  $last:當元素是遍歷的最後乙個時值為true。  $even:當$index值是偶數時值為true。

 $odd:當$index值是奇數時值為true。

7.}，angularjs內建語法，在內部sc

ope與

檢視之間

繫結，當

scope發生變化時與之對應的檢視也隨之變化。

8.ng-bind，該指令用於避免（flash unrendered content,fouc），因為內建}語法的元素不會立即進行渲染，因此，使用ng-bind將內容與元素繫結在一起，內容會被當作子文字節點渲染到含有ng-bind指令的元素內。

ng-init="greeting='helloworld'">
ng-bind="greeting">
p>
body>

9.與ng-bind類似的還是ng-cloak指令，ng-cloak指令會將內部元素隱藏,直到路由呼叫對應的頁面時才顯示出來。

ng-init="greeting='helloworld'">
ng-cloak>
}p>
body>

10.ng-bind-template，用於繫結多個表示式。

ng-bind-template="}}
">
div>

11.ng-model 指令用來將input、select、text area或自定義表單控制項同包含它們的作用域中的屬性進行繫結。它可以提供並處理表單驗證功能,在元素上設定相關的css類(ng-valid、 ng-invalid等),並負責在父表單中註冊控制項。

我們應該始終用ngmodel來繫結sc

ope上

乙個資料

模型內的

屬性,而

不是scope上的屬性, 這可以避免在作用域或後代作用域中發生屬性覆蓋。

例如:

type="text" ng-model="modelname.someproperty" />

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

"equationcontroller">
"text" ng-model="equation.x" ng-change="change()" />}
($scope) ;
$scope.change = function
() ; 
});

13.ng-attr-(suffix),當angularjs編譯dom時會查詢花括號}內的表示式。這些表示式會被自動註冊到wa

tch服

務中並更

新到digest迴圈中,成為它的一部分,有時瀏覽器會對屬性會進行很苛刻的限制。svg就是乙個例子:


cx="
}">
circle>
svg>

執行上面的**會丟擲乙個錯誤,指出我們有乙個非法屬性。可以用ng-attr-cx來解決這個問題。注意,cx位於這個名稱的尾部。在這個屬性中,通過用}來寫表示式,達到前面提到的目的。


ng-attr-cx="
}">
svg>

《Angular JS 權威教程》 內建指令