Question

我有一个页面，它使用两个控制器，SearchController和ProductController，它们都是一个应用程序的一部分。它们都位于主页面上，并使用ng-controller进行调用。我为点击“搜索”设置了路线，这会加载使用ng-view的{{1}}。这样可以很好地加载，但我遇到的问题是，当点击搜索时，页面上已经ProductController div的{{1}}不会受到影响。

以下是plunker：http://plnkr.co/edit/LnsL0M3KczBmeKsS9uDb?p=preview

HTML - 我有一个虚拟选择框。这里的重要部分是ProductController的第二个div。这是为了显示$ scope.products.length＆gt; 0.单击搜索时，将填充ProductController内的$ scope.products，但此框不受影响。

ProductController

在我的ProductController中，我加载了一个只带回一切的products.json文件。所以我认为现在$ scope.products.length＆gt; 0，上面的div应该显示。但事实并非如此。我做错了什么？

<div ng-controller="SearchController" class="ng-cloak">
  <div class="search-form">
    <select ng-model="search.category">
      ...
    </select>
    <button class="btn btn-primary" ng-disabled="search.category == 0" ng-click="doSearch()">Search</button>
  </div>
</div>

<div ng-controller="ProductController" class="ng-cloak">
  <div class="criteria" ng-show="products.length > 0">
    <div>Category: {{search.category}}</div>
  </div>
</div>

<div ng-view></div>

我正在使用console.logs，因此您可以更好地关注正在发生的事情。

此外，单击搜索后。如果再次单击“搜索”，则不会运行任何操作。我假设这是因为它已经运行了location.path函数。但是为什么会发生这种情况，如何再次进行搜索呢？

Answer 1

所以有几件事情飞跃了。首先，在您的controllers.js中，您将使用$inject和要传递给app.controller的第二个参数（数组）来指定要注入的内容。这不对 - 你应该有一个或另一个。让你的傻瓜工作，我删除了底部的两个$inject。

其次，你遇到的主要问题是范围界定。通过将$rootScope传递给两个控制器（我在'$scope'之前作为第一个数组参数传递它们）并添加$rootScope作为相应的第一个参数，两个控制器现在可以“通过” $rootScope。

然后：

$rootScope.search代替$scope.search
$rootScope.products代替$scope.products

这有帮助吗？ Here's the plunkr进行了这些更改

多个控制器，仅受影响的ng-view

1 个答案: