为什么在 AngularJS 中使用“controller as”语法？

理解 AngularJS 的“controller as”语法

简介

AngularJS 引入了一种定义控制器的新语法“controller as”，这引起了一些关注关于其目的的问题。本文旨在阐明此语法背后的基本原理及其优点。

Controller as 语法

“controller as”语法允许您实例化控制器并将其分配给当前的变量范围。例如：

<code class="javascript">controller('InvoiceController as invoice')</code>

此代码告诉 Angular 创建 InvoiceController 的实例并将其存储在当前范围内的发票变量中。

从 Controller 中删除 $scope

与“controller as”语法的一个显着区别是它从控制器定义中消除了 $scope 参数。这允许更干净、更简洁的控制器：

<code class="javascript">// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

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

在视图中分配别名

虽然从控制器中删除 $scope 简化了代码，但它要求您在视图中指定别名：

<code class="html">// With $scope
<input type="number" ng-model="qty" />

// With controller as
<input type="number" ng-model="invoice.qty" /></code>

控制器作为语法的用途

引入“controller as”语法主要是出于以下原因：

• 删除 $scope： 一些开发人员更愿意避免使用 $scope 语法，认为它会混淆属性的来源。
• 属性来源的清晰性： 通过在视图中使用别名，可以清楚地了解哪些属性属性属于哪个控制器。这在嵌套控制器时特别有用。
• 避免点规则问题：“controller as”语法有助于避免 AngularJS 的“点规则”问题，该问题可能导致访问属性变得困难来自父控制器。它允许对控制器属性进行清晰且分层的访问。

以上是为什么在 AngularJS 中使用“controller as”语法？的详细内容。更多信息请关注PHP中文网其他相关文章！