在 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 使用。