AngularJS 监听父作用域中的变化(watch for change in parent scope)

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

$scope.$watch的基本使用

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

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

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

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

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

监听父作用域中的变化

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

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

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

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

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

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

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

示例代码

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

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

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

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

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

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

-------

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

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

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

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

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