在AngularJS中，控制器（Controller）是用于处理视图和模型之间的交互逻辑的核心组件。当使用控制器时，有时需要从视图中传递数据到控制器中进行处理。本文将介绍如何将变量传递给AngularJS控制器，并提供一些最佳实践以及示例代码。
通过$scope对象传递变量
在AngularJS中，可以使用$scope对象来在控制器和视图之间共享数据。要将变量传递到控制器中，请将其添加到$scope对象中。例如，以下代码演示了如何在HTML视图中定义一个变量，并将其分配给$scope对象：
<div ng-controller="myController"> <input type="text" ng-model="myVariable"> </div>
在这个例子中，ng-model指令将输入框的值绑定到myVariable变量上。现在可以通过在控制器中访问$scope对象来读取和修改这个变量：
angular.module('myApp').controller('myController', function($scope) {
console.log($scope.myVariable); // 输出当前myVariable的值
$scope.myVariable = 'new value'; // 修改 myVariable 的值
});在这个例子中，console.log语句将打印myVariable的当前值。第二行代码将myVariable的值更改为'new value'。
这种方法简单易行，但存在一些潜在的问题。首先，所有$scope对象中定义的变量都会与视图绑定。如果控制器变得越来越复杂，将很难跟踪哪些变量是由视图使用的。其次，如果多个控制器都需要访问相同的变量，则必须在每个控制器中定义该变量并维护它们之间的同步。
使用服务传递变量
服务（Service）是AngularJS的另一个重要组件，用于在应用程序的不同部分共享代码和数据。使用服务可以帮助我们避免上述$scope对象的问题。可以创建一个名为 DataService 的服务，并将其注入到需要使用变量的控制器中。以下示例演示了如何定义一个DataService服务，并将其注入到myController控制器中：
-- -------------------- ---- ------- ---------------------------------------------- ---------- - --- ------- - --- ------------------ - --- ------ -------- --- -------------------------------------------------- ---------------- ------------ - ------------------------------------ -- ---- ---------- -- ---------------------- - ---- ------- -- -- ---------- -- ---
在这个例子中，DataService服务在返回一个对象之前定义了myVariable变量，因此该变量可供该服务的任何部分使用。在控制器中，可以通过将DataService作为参数注入来访问该服务，并通过DataService.myVariable来访问myVariable变量。这种方法的好处是可以在多个控制器中共享该变量，而不必在每个控制器中定义它。
在控制器之间传递变量
有时需要将数据从一个控制器传递到另一个控制器。为了实现这一点，可以使用AngularJS的$emit和$on方法。以下示例演示了如何在两个控制器之间传递变量：
-- -------------------- ---- -------
------------------------------------------------------ ---------------- -
----------------- - --------
----------------------- -------------------
---
----------------------------------------------------- ---------------- -
--------------------- --------------- ----- -
------------------ -- -- -------
---
---在这个例子中，parentController
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25233