为什么是 ControllerAs 语法

Created: November-22, 2018

控制器功能

Controller 函数只是一个 JavaScript 构造函数。因此，当视图加载时，function context（ this ）被设置为控制器对象。

情况 1 ：

this.constFunction = function() { ... }

它是在 controller object 中创建的，而不是在 $scope 上创建的。视图无法访问控制器对象上定义的函数。

示例：

<a href="#123" ng-click="constFunction()"></a> // It will not work

案例 2：

$scope.scopeFunction = function() { ... }

它是在 $scope object 中创建的，而不是在 controller object 上创建的。视图只能访问 $scope 对象上定义的函数。

示例：

<a href="#123" ng-click="scopeFunction()"></a> // It will work

为什么选择 ControllerAs？

ControllerAs 语法使得操作对象的位置更加清晰。使用 oneCtrl.name 和 anotherCtrl.name 可以更容易地识别出由多个不同控制器分配的 name 用于不同目的但是如果两者都使用相同的 $scope.name 并且在页面上具有两个不同的 HTML 元素哪两个都与 {{name}} 绑定，那么很难确定哪一个来自哪个控制器。

隐藏 $scope 并通过 tihuan 将控制器中的成员暴露给视图。通过设置 this.*，我们可以暴露出我们想要从控制器暴露到视图的内容。

  <div ng-controller="FirstCtrl">
      {{ name }}
      <div ng-controller="SecondCtrl">
          {{ name }}
          <div ng-controller="ThirdCtrl">
              {{ name }}
          </div>
      </div>
  </div>

在这里，在上面的情况下 {{ name }} 将使用起来非常混乱，我们也不知道哪个与哪个控制器有关。

<div ng-controller="FirstCtrl as first">
    {{ first.name }}
    <div ng-controller="SecondCtrl as second">
        {{ second.name }}
        <div ng-controller="ThirdCtrl as third">
            {{ third.name }}
        </div>
    </div>
</div>

为何范围？

当你需要访问 $watch，$digest，$emit，$http 等一个或多个$ scope 方法时，请使用 $scope。
限制哪些属性和/或方法暴露给 $scope，然后根据需要明确地将它们传递给 $scope。