AngularJS內置指令

時間 2019-11-08

標籤 angularjs 內置指令欄目 AngularJS 简体版

原文原文鏈接

這篇文章通篇都是轉的...原文出處無從考究，轉載的網站自己就沒有標明原文出處，SO，這裏也不必幫它作宣傳了。html

指令，我將其理解爲 AngularJS 操做 HTML element 的一種途徑。 git

因爲學習 AngularJS 的第一步就是寫內置指令 ng-app 以指出該節點是應用的根節點，因此指令早已不陌生。github

這篇日誌簡單記錄了一些內置指令，先使用起來，再談一些有趣的東西。app

內置指令ide

全部的內置指令的前綴都爲 ng，不建議自定義指令使用該前綴，以避免衝突。學習

首先從一些常見的內置指令開始。網站

先列出一些關鍵的內置指令，順便簡單說說做用域的問題。ui

ng-modelgoogle

將表單控件和當前做用域的屬性進行綁定，這麼解釋彷佛也不太正確。
但先不要管咬文嚼字，用起來卻是易懂，例如:spa

代碼以下:

<input type="text" ng-model="someModel.someProperty" />
<br> {{someModel.someProperty}}

ng-init

該指令被調用時會初始化內部做用域。
這個指令通常會出如今比較小的應用中，好比給個 demo 什麼的...

代碼以下:

<div ng-init="job='fighter'"> I'm a/an {{job}} </div>

ng-app

每一次用 AngularJS 都離不開這個指令，順便說下 $rootScope。
聲明瞭 ng-app 的元素會成爲 $rootScope 的起點，而 $rootScope 是做用域鏈的根，一般聲明在 <html> 你懂的。
也就是說根下的做用域均可以訪問它。
可是，不建議過分使用 $rootScope，省得全局變量滿天飛，效率又差又難管。
下面是一個例子:

代碼以下:

<html ng-app="myApp">
<body> {{ someProperty }} </body>
<script>
var myApp = angular.module('myApp', []) .run(function($rootScope) { $rootScope.someProperty = 'hello computer'; }); </script>
</html>

ng-controller

咱們用這個指令在一個 DOM 元素上裝上 controller。
一個控制器? 確實，從字面意思上這樣理解卻是不錯，那咱們爲何須要控制器?
記得 AngularJS 1.2.x 時還能夠這樣定義 controller 來着...

代碼以下:

 
  function ohMyController($scope) { //...
}

AngularJS 1.3.x 中禁止了這種方式，由於這種方式會讓 controller 滿天飛，分不清層次，全部東西都掛在 $rootScope 上...
ng-controller 必須有一個表達式做爲參數，另外經過 $scope 來繼承上級 $scope 的方法和屬性什麼的，$rootScope 也包括在內。
下面只是一個簡單的例子，ancestor 沒法訪問 child 的做用域。

代碼以下:

<div ng-controller="AncestorController"> {{ ancestorName }} {{ childName }} <div ng-controller="ChildController"> {{ ancestorName }} {{ childName }} </div>
</div>


<script>
var myApp = angular.module('myApp', []) 　　.controller('ChildController', function($scope) { 　　$scope.childName = 'child'; 　　}) 　　.controller('AncestorController', function($scope) { 　　$scope.ancestorName = 'ancestor'; 　　}); </script>

ng-form

起初不明白爲何會有個表單指令，<form> 標籤感受也夠用啊。
以表單驗證爲例，在上一篇中有這麼一段代碼:

代碼以下:

<input type="submit" ng-disabled="mainForm.$invalid" />

也就是表單的狀態爲 $invalid 時禁用提交按鈕。
若是場景再稍微複雜一點點，好比一個父表單中有多個子表單，子表單中有3個驗證經過時父表單即可以提交。
可是，<form> 是不能夠嵌套的。
考慮到這種場景，咱們便使用 ng-form 指令來解決這一問題。
例如:

代碼以下:

<form name="mainForm" novalidate>
    <div ng-form="form1"> 姓名:<input type="text" ng-required="true" ng-model="name"/><br> 證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>
    </div>
    <br>
    <div ng-form="form2"> 監護人姓名:<input type="text" ng-required="true" ng-model="gname"/><br> 監護人證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>
    </div>
    <button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>
</form>

ng-disabled

像這種只要出現則生效的屬性，咱們能夠在 AngularJS 中經過表達式返回值 true/false 令其生效。
禁用表單輸入字段。

代碼以下:

<textarea ng-disabled="1+1==2">1+1=?</textarea>

ng-readonly

經過表達式返回值 true/false 將表單輸入字段設爲只讀。

代碼以下:

<input type="text" ng-readonly="1+1==2" value="stop the world after 3s"/>

ng-checked

這個是給 <input type="checkbox" /> 用的，好比...

代碼以下:

<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">

ng-selected

給 <select> 裏面的 <option> 用的，例子:

代碼以下:

<label>
    <input type="checkbox" ng-model="isFullStack"> I'm Full Stack Engineer </label>

<select>
    <option>Front-End</option>
    <option>Back-End</option>
    <option ng-selected="isFullStack">Full Stack !!!</option>
</select>

ng-show/ng-hide

根據表達式顯示/隱藏 HTML 元素，注意是隱藏，不是從 DOM 移除，例如:

代碼以下:

<div ng-show="1+1 == 2"> 1+1=2 </div>

<div ng-hide="1+1 == 3"> you can't see me. </div>

ng-change

不是 HTML 那套 onXXX 之類的，而是 ng-XXX。
結合 ng-model 使用，以 ng-change 爲例:

代碼以下:

<input type="text" ng-model="calc.arg" ng-change="calc.result = calc.arg*2" />

<code>{{ calc.result }}</code>

ng-options 也就是 {{}}

其實這個也是一個指令，也許以爲和 ng-bind 差很少，但頁面渲染略慢時可能會被看到。
另外，{{}} 的 performance 遠不如 ng-bind，只是用起來很方便。

ng-bind

ng-bind 的行爲和 {{}} 差很少，只是咱們能夠用這個指令來避免頁面編譯生成過程產生的頁面閃爍，也就是未渲染致使的閃爍。

ng-cloak

ng-cloak 能夠爲咱們解決頁面閃爍問題。 ng-cloak 會將內部未解析的元素隱藏，直到路由調用對應的頁面並編譯解析完成後才顯示。

ng-if

若是 ng-if 中的表達式爲 false，則對應的元素整個會從 DOM 中移除而非隱藏，但審查元素時你能夠看到表達式變成註釋了。
若是相進行隱藏，可使用 ng-hide。

代碼以下:

<div ng-if="1+1===3"> 沒法審查到該元素 </div>

<div ng-hide="1+1==2"> 可審查 </div>

ng-switch

單獨使用沒什麼意思，下面是例子:

代碼以下:

<div ng-switch on="1+1">
    <p ng-switch-default>0</p>
    <p ng-switch-when="1">1</p>
    <p ng-switch-when="2">2</p>
    <p ng-switch-when="3">3</p>
</div>

ng-repeat

不明白爲毛不叫 iterate，總之是遍歷集合，給每一個元素生成模板實例，每一個實例的做用域中能夠用一些特殊屬性，以下:

 
 $index 
 
 $first 
 
 $last 
 
 $middle 
 
 even 
 
 odd

不用特意解釋，這些都很容易看出來是幹什麼的，下面是一個例子:

代碼以下:

<ul>
    <li ng-repeat="char in [{'alphabet': 'K'}, {'alphabet': 'A'}, {'alphabet': 'V'}, {'alphabet': 'L'}, {'alphabet': 'E'}, {'alphabet': 'Z'}] " ng-show="$even">{{char.alphabet}}</li>
</ul>

ng-href

起初我在一個文本域中弄了個 ng-model，而後像這樣 <a href="{{myUrl}}"> 在 href 裏面寫了進去。
其實這樣 href 和 ng-href 看不出什麼區別，因此咱們能夠試試這樣:

代碼以下:

<ul ng-init="myHref=''">
    <li><a ng-href="{{ myHref }}">{{linkText}}</a></li>
    <li><a href="{{ myHref }}">能夠點擊，但不必定是正確的地址</a></li>
</ul> 
app.run(function ($rootScope, $timeout) { $rootScope.linkText = '還沒有加載，您沒法點擊'; $timeout(function () { $rootScope.linkText = '請點擊'; $rootScope.myHref = 'http://google.com'; }, 2000); })

ng-src

大同小異，即表達式生效前不要加載該資源。

代碼以下:

<img ng-src="{{imgSrc}}"/> 
app.run(function ($rootScope, $timeout) { $timeout(function () { $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif'; }, 2000); })

ng-class

用做用域中的對象動態改變類樣式，例如:

代碼以下:

<style> .red {background-color: red;} .blue {background-color: blue;}
</style>
<div ng-controller="CurTimeController">
    <button ng-click="getCurrentSecond()" >Get Time!</button>
    <p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>
</div> app.controller('CurTimeController', ['$scope', function ($scope) { $scope.getCurrentSecond = function() { $scope.x = new Date().getSeconds(); }; }])

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。