AngularJS 在Angular JS中使用ControllerAs

示例

在Angular$scope中,Controller和View之间的粘合剂可以满足我们所有的数据绑定需求。Controller As是绑定控制器和视图的另一种方式,通常建议使用。基本上,这是Angular中的两个控制器构造(即$scope和Controller As)。

使用Controller As的不同方式是-

controllerAs查看语法

<div ng-controller="CustomerController as customer">
    {{customer.name}}
</div>

controllerAs控制器语法

function CustomerController() {
   this.name= {};
   this.sendMessage= function() { };
}

vm的controllerAs

function CustomerController() {
    /*jshint validthis: true */
    var vm = this;
   vm.name= {};
   vm.sendMessage= function() { };
}

controllerAs是语法糖了$scope。您仍然可以绑定到View并仍然访问$scope方法。使用controllerAs,是有角核心团队建议的最佳做法之一。原因有很多,其中很少有-

  • $scope通过中间对象将成员从控制器公开到视图。通过设置this.*,我们可以公开我们想要从控制器公开到视图的内容。它还遵循使用此代码的标准JavaScript方式。

  • 使用controllerAs语法,我们具有更易读的代码,并且可以使用父控制器的别名而不是使用$parent语法来访问parent属性。

  • 它促进了对视图中“点状”对象(例如,customer.name而不是名称)的绑定的使用,这是上下文相关的,更易于阅读的,并且避免了在没有“点状”的情况下可能发生的任何引用问题。

  • 帮助避免$parent在带嵌套控制器的视图中使用调用。

  • 使用controllerAs语法时,请为此使用捕获变量。选择一个一致的变量名称,例如vm,代表ViewModel。因为,this关键字是上下文的,并且在控制器内部的函数中使用时,关键字可能会更改其上下文。捕获此上下文可避免遇到此问题。

注意:使用controllerAs语法添加到当前范围引用到当前控制器,因此它可用作字段

<div ng-controller="Controller as vm>...</div>

vm可作为$scope.vm。