在 Angular 中，$scope 和 controller 是两个非常重要的概念，它们之间的关系也非常密切。$scope 是 Angular 中的一个对象，它用于在视图和控制器之间传递数据和方法，而 controller 则是用于控制视图和数据的逻辑部分。在本文中，我们将详细介绍 $scope 和 controller 之间的关系，并提供一些实例代码来帮助你更好地理解这些概念。
$scope 的基本用法
在 Angular 应用中，$scope 是一个关键的概念，它用于在控制器和视图之间传递数据和方法。$scope 对象是一个 JavaScript 对象，它充当了一个中间人的角色，将控制器中的数据和方法绑定到视图上。当控制器中的数据或方法发生变化时，$scope 对象会自动更新视图，从而使应用程序保持同步。
在 Angular 中，我们可以使用 $scope 对象来定义视图中的变量和函数。例如，我们可以定义一个 $scope 变量来存储用户的姓名：
------------------------ ---------------- - ----------- - ----- ----- ---
在这个例子中，我们创建了一个名为 myCtrl 的控制器，并将 $scope.name 赋值为 "John Doe"。在视图中，我们可以使用这个变量来显示用户的姓名：
---- ----------------------- ----- ---- -- ------------ ------
当 Angular 启动应用程序时，它会自动创建一个 $rootScope 对象，它是整个应用程序的根作用域。在 $rootScope 中定义的变量和函数可以在所有的子作用域中访问。当我们创建一个控制器时，Angular 会自动为我们创建一个新的作用域，并将其作为 $rootScope 的子作用域。这样，我们就可以在控制器中定义变量和函数，并将它们绑定到视图上。
controller 的基本用法
在 Angular 中，controller 是用于控制视图和数据的逻辑部分。它可以访问 $scope 对象，并在其中定义变量和函数。当视图需要访问控制器中的数据或方法时，它可以通过 $scope 对象来实现。
在 Angular 中，我们可以使用 app.controller 方法来定义控制器。例如，我们可以定义一个名为 myCtrl 的控制器来控制一个视图：
------------------------ ---------------- -
---------------- - -------
--------------- - ------
--------------- - ---------- -
------ ---------------- - - - - ----------------
--
---在这个例子中，我们定义了一个名为 myCtrl 的控制器，并在其中定义了三个 $scope 变量：firstName、lastName 和 fullName。其中，fullName 是一个函数，它返回 firstName 和 lastName 的组合字符串。在视图中，我们可以使用这些变量和函数来显示用户的姓名：
---- ----------------------- -------- ----- ----------------- ------- ----- ---------------- ------- ----- ------------------ ------
当 Angular 启动应用程序时，它会自动创建一个 $rootScope 对象，并将其作为整个应用程序的根作用域。在 $rootScope 中定义的变量和函数可以在所有的子作用域中访问。当我们创建一个控制器时，Angular 会自动为我们创建一个新的作用域，并将其作为 $rootScope 的子作用域。这样，我们就可以在控制器中定义变量和函数，并将它们绑定到视图上。
$scope 和 controller 的关系
在 Angular 中，$scope 和 controller 之间的关系非常密切。$scope 对象用于在控制器和视图之间传递数据和方法，而 controller 则是用于控制视图和数据的逻辑部分。在一个控制器中，我们可以访问 $scope 对象，并在其中定义变量和函数。这些变量和函数可以在视图中使用，从而实现控制器和视图之间的数据绑定。
例如，我们可以在控制器中定义一个 $scope 变量，然后在视图中使用它来显示数据：
------------------------ ---------------- - -------------- - ------- -------- ---
---- ----------------------- ------------------ ------
在这个例子中，我们定义了一个名为 myCtrl 的控制器，并将 $scope.message 赋值为 "Hello, World!"。在视图中，我们使用 {{message}} 来显示这个变量的值。当 Angular 启动应用程序时，它会自动创建一个 $rootScope 对象，并将其作为整个应用程序的根作用域。在 $rootScope 中定义的变量和函数可以在所有的子作用域中访问。当我们创建一个控制器时，Angular 会自动为我们创建一个新的作用域，并将其作为 $rootScope 的子作用域。这样，我们就可以在控制器中定义变量和函数，并将它们绑定到视图上。
示例代码
下面是一个完整的 Angular 应用程序，它演示了如何在控制器和视图之间使用 $scope 对象来传递数据和方法：
--------- -----
------
------
-------------- ---------------
------- ------------------------------------------------------------------------------------
-------
------
---- ---------------
---- -----------------------
-------- ----- ------ ----------- -------------------------
------- ----- ------ ----------- ------------------------
------- ----- ------------------
------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
---------------- - -------
--------------- - ------
--------------- - ---------- -
------ ---------------- - - - - ----------------
--
---
---------
-------
-------在这个例子中，我们创建了一个名为 myApp 的 Angular 应用程序，并定义了一个名为 myCtrl 的控制器。在控制器中，我们定义了三个 $scope 变量：firstName、lastName 和 fullName。其中，fullName 是一个函数，它返回 firstName 和 lastName 的组合字符串。在视图中，我们使用 ng-model 指令来绑定输入框中的值到 $scope 变量上，使用 {{fullName()}} 来显示用户的全名。当用户在输入框中输入数据时，Angular 会自动更新 $scope 变量，并将变量的值绑定到视图中。
总结
在 Angular 中，$scope 和 controller 是两个非常重要的概念，它们之间的关系也非常密切。$scope 对象用于在控制器和视图之间传递数据和方法，而 controller 则是用于控制视图和数据的逻辑部分。在一个控制器中，我们可以访问 $scope 对象，并在其中定义变量和函数。这些变量和函数可以在视图中使用，从而实现控制器和视图之间的数据绑定。在实际开发中，我们需要深入理解 $scope 和 controller 的关系，并掌握它们的基本用法，才能更好地开发 Angular 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653b2efc7d4982a6eb586031