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

Question

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

这是插件：http://plnkr.co/edit/LnsL0M3KczBmeKsS9uDb?p=preview

HTML - 我有一个虚拟选择框。这里重要的部分是 ProductController 的第二个 div。这意味着如果 $scope.products.length > 0 则显示。单击搜索时，ProductController 内部的 $scope.products 会被填充，但此框不受影响。

<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>

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

  $http.get('products.json')
    .success(function(data) {
      $scope.products = data[0].products;
      sessionService.loadProducts(data[0].products);
      console.log('JSON LOADED-------------');
      console.log('products.length: ', $scope.products.length);
    });

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

此外，一旦您点击搜索。如果您再次单击搜索，它不会运行任何内容。我假设这是因为它已经运行了 location.path 函数。但是为什么会发生这种情况，我怎样才能让它再次搜索呢？

Answer 1

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

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

然后：

1. $rootScope.search 而不是 $scope.search
2. $rootScope.products 而不是 $scope.products

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