从 ng-include 访问和修改 $scope答案

【问题标题】：Access and modify $scope from ng-include从 ng-include 访问和修改 $scope
【发布时间】：2014-06-16 22:33:37
【问题描述】：

编辑我刚刚意识到为什么它可能不起作用，尽管我不知道如何解决这个问题。包含在我的主 HTML 页面上，而不是在我的 ng-view 中。这可能是 $parent 不起作用的原因，因为从技术上讲，ng-view 是包含的父级。所以它是：

<body>
 <div ng-view></div>
 <div ng-include="menuPath"></div>
</body>

我需要从 ng-include 范围访问 ng-view 范围。

我创建了一个 plunker 来说明问题 http://plnkr.co/WtVdkWKXaPWCfHJPLf1q

原始问题

由于我无法控制的限制，我必须使用 ng-include 包含每个页面的所有菜单。我试图弄清楚如何从 ng-include 访问和修改父范围。我找到了几个关于它的线程，但例子都消失了。这似乎很简单，但我似乎找不到答案。

例如，在我的主页上，Scope 中有以下数据

{
  "Statuses":
  [
    {"ID":"1", "Name":"Open"},
    {"ID":"2", "Name":"Closed"}
  ],
  "StatusID":"1"
}

在我的 ng-include 中，我正在尝试执行以下操作：

<select ng-model="StatusID" ng-options="x.ID as x.Name for x in Statuses"></select>

虽然 ng-include 显然创建了它自己的 Scope，但它没有获取数据。

【问题讨论】：

尝试将您的对象放入服务并以这种方式共享。
你能给我举个例子吗？不一定要准确。我对此还是有点陌生。
您能否展示您如何在控制器中设置$scope.Statuses。这可能是问题所在。
我知道父页面上的范围设置正确，因为我正在从范围值加载主页上的数据。
使用 ng-view，控制器会自动交换。在 ng-include 中，视图已设置，但控制器从未交换（甚至设置）。这就是它不更新 ng-include 的视图的原因。如果您为每个菜单视图创建单独的指令，您将能够为每个视图设置不同的控制器。

标签： angularjs angularjs-scope angularjs-ng-include

【解决方案1】：

您可以将数据存储在服务中，因为它们是单例的并在控制器之间共享。像这样的：

app.factory('MenuCache', function() {

    var data = {
     };  // your data;

    return data;

});

然后它可以被注入到您的控制器中，因此您无需担心它们的祖先：

app.controller('MyCtrl', function($scope, MenuCache) {

});

** 或者，作为对预先更新的问题的回答 **

您可以在您的包含（请参阅 $parent.StatusID）上执行此操作，以访问父范围的 StatusID。

<select ng-model="$parent.StatusID" ng-options="x.ID as x.Name for x in a.Statuses">

演示：http://plnkr.co/edit/eZUnmZAWobFmw52B3IWh?p=preview

【讨论】：

我将这种基本方法与附加到服务的侦听器一起使用，因此两个视图都可以在数据更改时进行侦听，并且任何一个都可以提示更改。

【解决方案2】：

ng-include 是将创建子作用域的指令之一。因为它依赖作用域继承来解析绑定，所以 ng-model 应该有一个 '.'在其中正确解决。否则，当通过更改下拉列表设置 StatusID 时，它将在子作用域上创建一个影子变量，该变量是父作用域中变量的副本。这会破坏模型绑定。

你需要设置类似的东西：

<select ng-model="model.StatusID" 
     ng-options="x.ID as x.Name for x in model.Statuses"></select>

Wheremodel 在您的父作用域中定义。 This ensures that when the Select list changes, it updates the correct model.

在您的父控制器中：

app.controller('parentCtrl', function($scope) {
     $scope.model = {
        "Statuses":
         [
             {"ID":"1", "Name":"Open"},
             {"ID":"2", "Name":"Closed"}
         ],
         "StatusID":"1"
    }
});

【讨论】：

见上面的编辑，我相信我明白为什么建议的解决方案不起作用。我修改了我的问题以更准确地描述情况。
ng-view 和 ng-include 一样，创建子作用域。我的解决方案或 lucuma 的解决方案应该有效。两种解决方案都尝试使用范围继承来解析范围变量。可能我们看不到的其他事情正在发生。您是否在作用域继承树的某处使用了隔离作用域？这或许可以解释为什么它不能正确解决。
$parent 没有定义很奇怪。你能用一些最少的代码发布一个 plunker 来演示这个问题吗？
我会把一个放在一起。