0

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

这是plunker：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 函数。但是为什么会发生这种情况，我怎样才能让它再次搜索呢？

4

1 回答 1

0

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

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

然后：

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

这有帮助吗？这是进行了这些更改的 plunkr

于 2013-05-24T02:48:34.003 回答