Question

我想为两个分开的div使用一个控制器，当我这样做时，它会发送$ http请求两次我如何使用其他控制器的范围？这是我的代码：

            <div data-ng-controller="productCTRL">
                <span ng-model="basket | count"></span>
              ....Some HTML Code......
            </div>
            <div data-ng-controller="AuthController">
                   ....Some HTML Code...
            </div>
            <div data-ng-controller="productCTRL">
               <ul ng-repeat="product in products">
                  <li>{{product.title}}</li>
               </ul>
            </div>

Answer 1

一种方法......

您可以使用单片控制器：

<div data-ng-controller="mainCTRL">
    <div data-ng-controller="productCTRL">
        <span ng-model="basket | count"></span>
        ....Some HTML Code......
    </div>
    <div data-ng-controller="AuthController">
        ....Some HTML Code...
    </div>
    <div data-ng-controller="productCTRL">
       <ul ng-repeat="product in products">
          <li>{{product.title}}</li>
       </ul>
    </div>
</div>

然后，如果您在$http而不是mainCTRL进行productCTRL来电，那么在呈现视图时它只会运行一次。然后，您可以通过范围继承从mainCTRL访问productCTRL中保存的数据。

另一种方法......

您可以将$http电话转移到有角度的服务或工厂。由于这些是单例，因此只存在一个实例，这意味着首次加载应用时只会进行一次$http调用。然后，您将在服务中本地存储返回的数据并公开公开。

这是一个简单的工厂实现：

app.factory("productService", function($http){

  var products = [];

  $http.get("api/products/get-products").then(function(response){
    products = response.data;
  });

  return {
    products: products
  }
});

如果您将工厂注入productCTRL，则可以直接访问products数据：

appController("productCTRL", function(productService){
  $scope.products = productService.products;
});

控制器仍然会被实例化两次，但它只会重新分配$scope.products变量。最重要的是，它不再通过HTTP对您的API进行冗余调用。

Answer 2

看起来您想要访问其他控制器的范围 -

三种沟通方式 -

父子继承范围 - 您必须创建父控制器，子控制器可以使用父范围进行通信。建议仅用于紧耦合控制器。
事件总线 - 订阅可以监听事件（$ on），发布者可以使用$ emit发布（当前到父作用域可以使用$ on访问）或$ brodcast（当前到子作用域可以使用$ on访问）。兄弟控制器无法使用此方法共享数据。要在兄弟控制器之间共享数据，您可以使用$ rootScope.broadcast，此事件将被包括兄弟控制器在内的所有范围监听。它也使用事件耦合。
使用服务 - 两个控制器都可以使用公共服务共享数据，因为服务是单例。

定义一个控制器并使用两次

2 个答案: