在 Angular JS 中使用 ControllerAs

在 Angular 中，$scope 是 Controller 和 View 之间的粘合剂，可以帮助满足我们所有的数据绑定需求。控制器作为绑定控制器和视图的另一种方式，大多数建议使用。基本上这些是 Angular 中的两个控制器结构（即$ scope 和 Controller As）。

使用 Controller As 的不同方式是 -

controllerAs 查看语法

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

controllerAs 控制器语法

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

controller 与 vm

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

controllerAs 是 $scope 的语法糖。你仍然可以绑定到 View 并仍然访问 $scope 方法。使用 controllerAs 是角度核心团队提出的最佳实践之一。这有很多原因，其中很少是 -

• $scope 通过中间对象将成员从控制器暴露给视图。通过设置 this.*，我们可以暴露出我们想要从控制器暴露到视图的内容。它也遵循标准的 JavaScript 方式使用它。

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

• 它促进了对视图中虚线对象的绑定的使用（例如，customer.name 而不是 name），它更具上下文性，更易于阅读，并且避免了在没有点的情况下可能发生的任何引用问题。

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

• 使用 controllerAs 语法时，请使用捕获变量。选择一致的变量名称，例如 vm，它代表 ViewModel。因为，this 关键字是上下文的，当在控制器内的函数内使用时，可能会改变其上下文。捕获这种情况可以避免遇到这个问题。

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

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

vm 可作为 $scope.vm 使用。