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

我试图在一个控制器中设置http请求数据，并在多个控制器中使用该数据。我有类似的东西

我的服务

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
        };
    }
]);

导航控制器

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

产品细节控制器

      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时如何在产品详细信息控制器中更新targetProduct。有人可以帮我吗？非常感谢！

最佳答案

就样式而言，函数getTargetProduct不需要所有带有promise的样板代码。您想返回一个简单的承诺，包装本地数据targetProduct。功能可以更整洁：

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

注意：在下文中，为了方便起见，我将使用名称testService引用您的服务productService，并且我将使用名称navController引用您的控制器ProductController

控制器NavController（获得的产品如下：

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

当用户设置目标产品（不变）时：

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

解决方案1：嵌套控制器

如果ProductDetailController是ProductController的嵌套控制器，则数据targetProduct是共享的，没有逻辑。

解决方案2：控制器未通过父子关系链接

如果两个控制器未通过父子关系链接，则可以使用$broadcast广播updateTargetProduct事件，并使用$on处理该事件。

在设置目标产品的控制器中，我们将找到：

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

注意：$broadcast将把事件从rootscope广播到子作用域。

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

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

关于javascript - Angular 如何在我的情况下设置服务，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29156023/