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修改值后，后端的对应的值也跟着发生一样的变化。