前言
AngularJS 是一款非常流行的前端框架，它提供了一套完整的 MVC 架构，并且使用双向数据绑定的方式使得前端开发变得更加方便。在 AngularJS 中，Scope 和 Controller 是两个非常重要的概念，它们之间的交互也是我们在开发中需要重点关注的部分。本文将详细介绍 AngularJS 中 Scope 和 Controller 的交互方式，希望能够帮助读者更好的理解和使用 AngularJS。
Scope 和 Controller 的关系
在 AngularJS 中，每个视图都会有一个 Scope，它是视图和 Controller 之间的桥梁。Scope 用于存储视图中的数据，并且提供了一些方法使得数据可以传递到 Controller 中。而 Controller 则是用来控制视图的行为和逻辑的，它可以访问 Scope 中的数据，并且通过一些方法来更改数据，从而实现视图的动态更新。
下面是一个简单的示例，展示了 Scope 和 Controller 之间的关系：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
---------------- ----- --- ------------------
------- ---------------------------------------------------------------
-------
----- -----------------------
------ ----------- -------------------
------- ----------------------------- ----------------
----
------------------------
-------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ---
------------------ - ---------- -
-------------------- - ---------------
--
---
---------
-------在这个示例中，我们创建了一个名为 myApp 的 AngularJS 应用，然后在 body 元素上使用了 ng-controller 指令来指定该视图使用 myCtrl 这个 Controller。在视图中，我们使用了 ng-model 指令来绑定一个输入框和 Scope 中的 message 变量，同时使用了 ng-click 指令来绑定一个按钮和 showMessage 方法。在 Controller 中，我们首先定义了一个 $scope.message 变量，并且定义了一个 showMessage 方法，该方法用于将 $scope.message 的值赋值给 $scope.messageToShow 变量。在视图中，我们使用了 {{messageToShow}} 来显示 $scope.messageToShow 的值。
当我们在输入框中输入一些内容，然后点击按钮时，会调用 showMessage 方法，该方法会将 $scope.message 的值赋值给 $scope.messageToShow 变量，然后在视图中显示出来。这个过程中，Scope 和 Controller 之间的交互就发挥了重要作用。
Scope 的属性和方法
在 AngularJS 中，Scope 提供了一些属性和方法，用于实现和 Controller 的交互。下面是一些常用的属性和方法：
$scope.$watch
$scope.$watch 方法用于监控 Scope 中某个变量的变化，并且在变化时执行一些操作。该方法接受两个参数，第一个参数是要监控的变量名，第二个参数是一个回调函数，该函数会在变量发生变化时被调用。
下面是一个示例，展示了如何使用 $scope.$watch 方法来监控 Scope 中的变量：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
---------------- ----- --- ------------------
------- ---------------------------------------------------------------
-------
----- -----------------------
------ ----------- -------------------
----
------------------------
-------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ---
------------------------ ------------------ --------- -
-------------------- - ----------------
---
---
---------
-------在这个示例中，我们使用了 $scope.$watch 方法来监控 $scope.message 的变化。当 $scope.message 的值发生变化时，回调函数会被调用，该函数会将 $scope.message 的长度赋值给 $scope.messageLength 变量，从而实现了动态更新。
$scope.$apply
$scope.$apply 方法用于强制更新 Scope 中的变量，并且通知 AngularJS 框架进行数据绑定和视图更新。该方法通常用于在异步操作中更新 Scope 中的变量。
下面是一个示例，展示了如何使用 $scope.$apply 方法来更新 Scope 中的变量：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
---------------- ----- --- ------------------
------- ---------------------------------------------------------------
-------
----- -----------------------
------- --------------------------------- ----------------
----
------------------
-------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ---
-------------------- - ---------- -
--------------------- -
------------------------ -
-------------- - ------ -------
---
-- ------
--
---
---------
-------在这个示例中，我们定义了一个 updateMessage 方法，该方法会在 1 秒后将 $scope.message 的值赋值为 'Hello World'。由于 setTimeout 方法是异步的，因此我们需要使用 $scope.$apply 方法来强制更新 Scope 中的变量，并且通知 AngularJS 框架进行数据绑定和视图更新。
$scope.$emit 和 $scope.$broadcast
$scope.$emit 方法用于向父级 Scope 发送事件，而 $scope.$broadcast 方法用于向子级 Scope 发送事件。这两个方法都接受两个参数，第一个参数是事件名称，第二个参数是事件数据。
下面是一个示例，展示了如何使用 $scope.$emit 和 $scope.$broadcast 方法来发送事件：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
---------------- ----- --- ------------------
------- ---------------------------------------------------------------
-------
----- -----------------------
------- ----------------------------- ----------------
----
------------------
---- ----------------------------
------------------
------
-------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ---
------------------ - ---------- -
---------------------------- ------ --------
--
--------------------- --------------- ----- -
-------------- - -----
---
---
----------------------------- ---------------- -
-------------- - ---
--------------------- --------------- ----- -
-------------- - -----
---
---
---------
-------在这个示例中，我们定义了两个 Controller，一个是 myCtrl，一个是 myChildCtrl。在 myCtrl 中，我们定义了一个 sendMessage 方法，该方法会使用 $scope.$broadcast 方法向子级 Scope 发送 myEvent 事件，并且传递了一个字符串数据 'Hello World'。在 myChildCtrl 中，我们使用 $scope.$on 方法监听 myEvent 事件，并且在事件被触发时将事件数据赋值给 $scope.message 变量。在视图中，我们分别显示了两个 Scope 中的 $scope.message 变量，从而展示了事件的传递过程。
总结
在本文中，我们详细介绍了 AngularJS 中 Scope 和 Controller 的交互方式，并且展示了一些常用的属性和方法。通过学习本文，读者可以更好地理解和使用 AngularJS，并且在实际开发中能够更加高效地使用 Scope 和 Controller 来实现视图的动态更新和事件的传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655c4c93d2f5e1655d6669d3