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

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

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

三种沟通方式-

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

Answer 2

一种方法...

您可以使用单片控制器：

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

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

另一种方法...

您可以将 $http 调用移动到 angular 服务或工厂。由于这些是单例，因此只会存在一个实例，这意味着首次加载应用程序时只会进行一次 $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.

进行冗余调用

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

define a controller and use twice

angularjs

angularjs-controller