為什麼是 ControllerAs 語法

控制器功能

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。