理解AngularJS的“controller as”語法

簡介

AngularJS引入了定義控制器的新語法“controller as”，這引起了一些關注關於其目的的問題。本文旨在闡明此語法背後的基本原則及其優點。

Controller as 語法

「controller as」語法可讓您實例化控制器並將其指派給目前的變數範圍。例如：

controller('InvoiceController as invoice')

此程式碼告訴 Angular 建立 InvoiceController 的實例並將其儲存在目前範圍內的 Invoice 變數中。

從控制器中刪除 $scope

與「controller as」語法的一個顯著區別是它從控制器中刪除了 $scope 參數控制器定義。這允許更乾淨、更簡潔的控制器：

// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

// With controller as
function InvoiceController() {
  // Do something with this.qty
}

在視圖中分配別名

雖然從控制器中刪除$scope可以簡化程式碼，但它要求您在視圖中指定別名：

// With $scope


// With controller as

控制器作為語法的用途

引入「controller as」語法主要是出於以下原因：

• 刪除$scope: 一些開發人員更喜歡避免使用$scope 語法，認為它會混淆$scope 的來源properties.
• 屬性來源的清晰度： 透過在視圖中使用別名，可以清楚哪些屬性屬於哪個控制器。這在嵌套控制器時特別有用。
• 避免點規則問題：「controller as」語法有助於避免 AngularJS 的「點規則」問題，這可能會導致存取屬性變得困難來自父控制器。它允許對控制器​​屬性進行清晰且分層的存取。