javascript - Angular 如何在我的情况下设置服务

Question

我正在尝试在一个 Controller 中设置http请求数据，并让该数据在多个 Controller 中使用。我有类似的东西

我的服务

angular.module('myApp').service('testService', ['Product','$q',
    function(Product, $q) {
        var products, targetProduct;
        var deferred = $q.defer();

        Product.query({
            Id: 123
            }, function(products) {
                targetProduct = products[0];
                deferred.resolve(products);
        })

        var getTargetProduct = function() {
            var deferredtwo = $q.defer();

            // return deferredtwo.promise;
            deferred.promise.then(function(){
                deferredtwo.resolve(targetProduct);
            })
            return deferredtwo.promise;
        }

        var setTargetProduct = function(targetProduct) {
                targetProduct = targetProduct
        }

        return {
            setTargetProduct: setTargetProduct,
            getTargetProduct: getTargetProduct,
            productPromise : deferred.promise
        };
    }
]);

导航 Controller

  testService.productPromise.then(function(products){
            $scope.products= products;
             $scope.targetProduct = products[0];
   })
  //when user click the project  ng-click = setTargetProduct(product);
  $scope.setTargetProduct = function(targetProduct) {
         testService.setTargetProduct(targetProduct)
   }

产品详细信息 Controller

      testService.getTargetProduct().then(function(targetProduct) {
           // works when page first loads
           // but I don't know how to update the targetProduct when user select different             
           //targetProduct which means they trigger setTargetProduct() method
           $scope.targetProduct = targetProduct; 
      })

如上所述，当用户选择另一个 targetProduct 时，我不确定如何更新产品详细信息 Controller 中的 targetProduct。谁能帮我解决这个问题吗？非常感谢!

Answer 1

就风格而言，函数 getTargetProduct 不需要所有带有 Promise 的样板代码。您想要返回一个包装本地数据 targetProduct 的简单 promise 。该函数可以更加简洁:

var getTargetProduct = function() {
    return $q.when(targetProduct);
}

注意:为了方便起见，在下文中，我将通过名称 productService 来引用您的服务 testService，并通过名称 productService 来引用您的 Controller navController，名称为ProductController

Controller NavController(获取产品如下:

productService.getProducts().then(function(products) {
    $scope.products = products;
}

当用户设置目标产品时(不变):

$scope.setTargetProduct = function(targetProduct) {
   testService.setTargetProduct(targetProduct)
}

解决方案 1:嵌套 Controller

如果 ProductDetailController 是 ProductController 的嵌套 Controller ，则数据 targetProduct 会被共享，而无需您的任何逻辑。

解决方案 2: Controller 未通过父子关系链接

如果两个 Controller 没有通过父子关系链接，您可以使用 $broadcast 广播 updateTargetProduct 事件，并使用 $on 用于处理该事件。

在我们设置目标产品的 Controller 中，我们会发现:

$rootScope.$broadcast('updateTargetProduct', targetProduct);  

注意:$broadcast 会将事件从根作用域向下广播到子作用域。

在ProductDetailController中，我们将监听此事件:

$scope.$on('updateTargetProduct', function(event, data) {
    // play with the received data
}