在 Angular 中使用 ng-include 指令可以动态地将一个 HTML 文件插入到当前页面中。但是，当你使用这个指令时，你会发现被插入的 HTML 页面无法访问当前页面的 $scope，因为它们拥有不同的作用域。
本文将介绍如何通过 ng-include 指令在两个不同的作用域之间共享数据，并提供一些示例代码来帮助你加深理解。
理解作用域
在 Angular 中，每个控制器都有自己的作用域。这意味着一个控制器中定义的变量只能在这个控制器的视图中访问。如果想要让其他控制器或者模板也能够访问这个变量，我们就需要将它添加到 $scope 对象上。
例如，在下面的控制器中，我们向 $scope 对象添加了一个名为 message 的属性：
------------------------ ---------------- - -------------- - ------- -------- ---
在这个例子中，message 变量可以在这个控制器关联的视图中使用，比如：
---- ----------------------- -- ------- -- ------
这将显示 "Hello, World!"。
使用 ng-include
ng-include 是一个 Angular 内置指令，用于在当前页面中包含其他 HTML 文件的内容。使用 ng-include 可以让我们将网站分成多个模块，每个模块有自己的 HTML 文件和控制器。
例如，我们有两个 HTML 文件：
---- ---------- --- ---- ----------------------- ---- ----------------------------------- ------ ---- ------------- --- ------ ----- -------
其中，index.html 中的 ng-include 指令将 template.html 插入到当前页面中。现在的问题是，在 template.html 中如何访问 myCtrl 控制器的 $scope 对象中的变量呢？
在 ng-include 中传递 $scope
为了让 template.html 中的变量能够访问 myCtrl 控制器的 $scope 对象，我们可以使用 ng-include 的第二个参数来传递 $scope 对象。
---- ---------- --- ---- ----------------------- ---- ---------------------------- ----------------------------- ------ ---- ------------- --- ------ ----- -------
在 ng-include 的第二个参数中，我们调用了一个名为 loaded 的函数，并将 $scope 对象传递给它。这个函数会在被插入的 template.html 加载完成后被调用。
现在我们需要在 myCtrl 中定义这个 loaded 函数。它需要将传递过来的 $scope 对象合并到当前控制器的 $scope 中：
------------------------ ---------------- -
-------------- - ------- --------
------------- - --------------- -
--- ---- -------- -- ------ -
-- -------------------------------- -
---------------- - ----------------
-
-
--
---在这个例子中，我们遍历了从 ng-include 中传递过来的 $scope 对象，并将它们合并到了当前控制器的 $scope 中。这样，在 template.html 中就能够访问 myCtrl 控制器的变量了。
示例代码
下面是完整的示例代码：
---- ---------- --- --------- ----- ----- --------- --------------- ------ ----- ---------------- -------------- ----------------- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------