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