AngularJs ngCloak、ngController、ngInit、ngModel

ngCloak

ngCloak指令是為了防止Angular應用在啟動加載的時候html模板將會被短暫性的展示。這個指令可以用來避免由HTML模板顯示造成不良的閃爍效果。

格式： ng-cloak   class=“ng-cloak“

使用代碼：

  <div ng-cloak>{{'Hello World'}}</div>
  <div class="ng-cloak">{{'Hello World'}}</div>

ng有兩種綁定數據到頁面的寫法，ngBind和{{hash}}，ngBind需要一個載體（比如：<span ng-bind="'Hello World'"></span>）,而{{hash}}方式直接綁定（比如：{{'Hello World'}}），ngBind綁定的話，在不斷的刷新或者載入頁面過慢的情況下不會出現綁定表達式的閃爍，但是{{hash}}方式就會出現表達式閃爍的情況了（在交互體驗上沒做的那么完善，把未執行計算的表達式顯示出來）。

在用{{hash}}方式的時候需要解決表達式閃爍現象，就需要用到ngCloak指令了，ngCloak指令的實現是先將綁定元素的設置為display:none，然后在數據解析出來后又顯示出來。詳情可點擊破狼的文章 ng-cloak 看更詳細信息。

ngController

ngController 指令給頁面附上一個controller類。這是Angular如何支持MVC設計模式的關鍵所在。

格式：ng-controller=“value”

value：controller的名稱。

使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      {{ctrl.value}}
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.value= "Hello World";
    };
  }());

ngController指令將在js上定義控制器綁定到頁面元素上，那么這一塊元素就有這個控制器進行操作了，在controller的$scope上綁定各種數據，可在view內的ngController范圍餒進行綁定和展示。

ngInit

ngInit指令允許你在當前范圍內執行自定義行為(指定表達式)。

格式：ng-init=“value”

value：表達式。

使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl">
      <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
          <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
              <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
          </div>
      </div>
  </div>

這個指令用於在一塊范圍內定義值或者表達式。比如上述例子代碼，是把第一層循環的索引傳入第二層循環中。

ngModel

Angular的雙向數據綁定關鍵所在。ngModel指令通過這個指令創建的controller給input、select、textarea（或者自定義窗體）綁定scope上的某個屬性值。

ngModel主要負責：

• 將視圖綁定到模型中，一些指令像input、textarea或者select的需求。
• 提供驗證行為。
• 保持控制狀態。
• 給元素設置相關css類，包括動畫。
• 將控制注冊給父窗體。

使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
       <input ng-model="ctrl.value">
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.value= "Hello World";
    };
  }());

ngModel指令完美的詮釋了Angular的雙向數據綁定，很多ng教程的說明雙向數據綁定都會用到它。也就是我們在view修改值后，后端的對應的值也跟着發生一樣的變化。