AngularJS內建指令_AngularJS

指令，我將其理解為AngularJS操作HTML element的一種途徑。
由於學習AngularJS的第一步就是寫內建指令ng-app以指出該節點是應用的根節點，所以指令早已不陌生。

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

內建指令

所有的內建指令的前綴都是ng，不建議自訂指令使用該前綴，以免衝突。
首先從一些常見的內建指令開始。
先列出一些關鍵的內建指令，順便簡單說說作用域的問題。

ng-model

將表單控制項和目前作用域的屬性綁定，這麼解釋似乎也不太正確。
但先不要管咬文嚼字，用起來倒是易懂，例如:

複製程式碼 程式碼如下:

{{someModel.someProperty}}

ng-init

指令被呼叫時會初始化內部作用域。
這個指令一般會出現在比較小的應用中，例如給個demo什麼的...

複製程式碼 程式碼如下:

    I'm a/an {{job}}

除了ng-init，我們還有更多更好的選擇。

ng-app

每次用AngularJS都離不開這個指令，順便說下$rootScope。
聲明了ng-app的元素會成為$rootScope的起點，而$rootScope是作用域鏈的根，通常聲明在你懂的。
也就是說根下的作用域都可以存取它。
但是，不建議過度使用$rootScope，免得全域變數滿天飛，效率又差又難管。
下面是一個例子:

複製程式碼 程式碼如下:

    {{ someProperty }}

<script><br /> var myApp = angular.module('myApp', [])<br /> .run(function($rootScope) {<br />     $rootScope.someProperty = 'hello computer';<br /> }); <br /> </script>

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的作用域。

複製程式碼 程式碼如下:

    {{ ancestorName }}
    {{ childName }}
   

        {{ ancestorName }}
        {{ childName }}
   

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

作用域的問題遠不止如此，暫且擱下，繼續看看其他內建指令。

ng-form

一開始不明白為什麼會有表單指令，

標籤感覺也夠用啊。
以表單驗證為例，在上一篇有這麼一段程式碼:

複製程式碼 程式碼如下:

也就是表單的狀態為$invalid時停用提交按鈕。
如果場景再稍微複雜一點點，例如一個父表單中有多個子表單，子表單中有3個驗證通過時父表單便可以提交。
但是，

是不可以嵌套的。
考慮到這種場景，我們便使用ng-form指令來解決這個問題。
例如:

複製程式碼 程式碼如下:

   

        姓名:

        證件號碼:
   

   

   

        監護人姓名:

        監護人證件號碼:
   

    submit all

ng-disabled

像這種只要出現則生效的屬性，我們可以在AngularJS中透過表達式傳回值true/false令其生效。
禁用表單輸入欄位。

複製程式碼 程式碼如下:

1 1=?

ng-readonly

透過表達式傳回值true/false將表單輸入欄位設為唯讀。
弄個例子，3秒後變成唯讀.

複製程式碼 程式碼如下:

.run(function($rootScope,$timeout){
    $rootScope.stopTheWorld=false;
    $timeout(function(){
        $rootScope.stopTheWorld = true;
    },3000)
})

ng-checked

這個是給用的，像是...

複製程式碼 程式碼如下:

ng-selected

給裡面的用的，例子:

複製程式碼 程式碼如下:

   
    I'm Full Stack Engineer


    Front-End
    Back-End
    Full Stack !!!

 

ng-show/ng-hide

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

複製程式碼 程式碼如下:

    1 1=2

    you can't see me.

ng-change

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

複製程式碼 程式碼如下:

    {{ calc.result }}

或如ng-options

{{}}

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

ng-bind

ng-bind的行為和{{}}差不多，只是我們可以用這個指令來避免FOUC(Flash Of Unrendered Content)，也就是未渲染所造成的閃爍。

ng-cloak

ng-cloak也可以為我們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由呼叫對應的頁面。

ng-if

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

複製程式碼 程式碼如下:

    無法審查到該元素

    可審查

ng-switch

單獨使用沒什麼意思，以下是範例:

複製程式碼 程式碼如下:

   

0

   

1

   

2

   

3

ng-repeat

不懂為毛不叫iterate，總之是遍歷集合，給每個元素生成模板實例，每個實例的作用域中可以用一些特殊屬性，如下:

複製程式碼 程式碼如下:

$index
$first
$last
$middle
even
odd

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

複製程式碼 程式碼如下:

   
• {{char.alphabet}}

ng-href

起初我在一個文字域中弄了個ng-model，然後像這樣在href裡面寫了進去。
其實這樣href和ng-href看不出什麼差別，所以我們可以試試看這樣:

複製程式碼 程式碼如下:

   
• {{linkText}}

   
• 可以點選，但不一定是正確的位址

.run(function($rootScope, $timeout) {
    $rootScope.linkText = '尚未加載，您無法點擊';
    $timeout(function() {
        $rootScope.linkText = '請點選'
        $rootScope.myHref = 'http://google.com';
    }, 2000);
})

ng-src

大同小異，即表達式生效前不要載入該資源。
例(ps: 圖片不錯! ):

複製程式碼 程式碼如下:

.run(function($rootScope, $timeout) {
    $timeout(function() {
        $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
    }, 2000);
})

ng-class

用作用域中的物件動態改變類別樣式，例如:

複製程式碼 程式碼如下:

    Get Time!
   

Number is: {{ x }}

.controller('CurTimeController', function($scope) {
    $scope.getCurrentSecond = function() {
        $scope.x = new Date().getSeconds();
    };
}) 

以上就是本文所述的全部了，希望大家能夠喜歡。