理解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 语法，认为它会混淆属性的来源。
• 属性来源的清晰性: 通过在视图中使用别名，可以清楚哪些属性属于哪个控制器。这在嵌套控制器时特别有用。
• 避免点规则问题：“controller as”语法有助于避免 AngularJS 的“点规则”问题，这可能会导致访问属性变得困难来自父控制器。它允许对控制器属性进行清晰且分层的访问。