AngularJS 监听父作用域中的变化（watch for change in parent scope）-JavaScript中文网-JavaScript教程资源分享门户

在AngularJS开发中，我们经常需要在组件之间传递数据。有时候，子组件需要访问父组件的数据，或者我们想要监听父组件中的数据变化。这时，可以使用 $scope.$watch 方法来实现。

$scope.$watch的基本使用

$scope.$watch 是 AngularJS 提供的一个方法，用于监听一个表达式的值是否发生了变化。它的基本语法如下：

$scope.$watch('expression', callback(newValue, oldValue))

其中，expression 是要监听的表达式，可以是一个字符串（表示变量名）或一个函数；callback 则是当 expression 的值发生变化时执行的回调函数，回调函数包含两个参数，分别是新值和旧值。

例如，如果我们要监听某个 $scope 中的变量 name 是否发生了变化，可以这样写：

$scope.$watch('name', function(newValue, oldValue) {
  // do something when name changes
});

监听父作用域中的变化

有时候，我们的组件并不是直接嵌套在父组件中，而是通过一些其他方式（比如路由）加载进来的。这时，我们无法直接访问到父组件中的 $scope 对象，但是仍然需要监听父组件中的一些数据变化。

在这种情况下，我们可以使用 $scope.$parent 来访问父作用域中的数据。$scope.$parent 指向当前 $scope 对象的父级，如果当前 $scope 没有父级，则 $scope.$parent 为 null。

例如，如果我们有一个父组件的控制器如下所示：

angular.module('myApp', [])
  .controller('ParentCtrl', function($scope) {
    $scope.parentName = 'John';
  });

现在，我们想要在一个嵌套的子组件中监听 parentName 的变化。我们可以在子组件的控制里面写以下代码：

$scope.$watch('$parent.parentName', function(newValue, oldValue) {
  // do something when parentName changes
});

这样，每当 parentName 变化时，回调函数就会被执行。

示例代码

下面是一个完整的示例代码，展示了如何在子组件中监听父组件中的变量：

-- -------------------- ---- -------
--------- -----
----- ---------------

------
  ----- ----------------
  ---------------- ----- ------ ----- ------------
  ------- ---------------------------------------------------------------
-------

----- ---------------------------
  ---------- --------------
  -------- ------------------
  
  ---- --------------------------------

  --------
    ----------------------- ---
      ------------------------- ---------------- -
        ----------------- - -------
      --

      ------------------------ ---------------- -
        ----------------------------------- ------------------ --------- -
          ------------------- ---- ------- ---- -- - -------- - -- -- -- - -------- - ------
        ---
      ---
  ---------
-------

-------

在这个例子中，我们使用了一个 AngularJS 的指令 ng-include 来加载子组件。子组件的 HTML 内容保存在 child.html 文件中：

<h2>Child Component</h2>
<p>Listening for changes in parent scope.</p>

子组件的控制器代码如下所示：

angular.module('myApp')
  .controller('ChildCtrl', function($scope) {
    $scope.$watch('$parent.parentName', function(newValue, oldValue) {
      console.log('Parent name changed from "' + oldValue + '" to "' + newValue + '".

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/25457) ，转载请注明来源
[https://www.javascriptcn.com/post/25457](https://www.javascriptcn.com/post/25457)