Question

我正在尝试在一个控制器中设置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。任何人都可以帮我这个吗？非常感谢！

Answer 1

也许你的情况和我一样，但我为自己的$ http电话提供服务

var myService = angular.module('apix',[]);

myService.service('api',function( $http ){

        this.http = function( method , path , data ){

            return $http({
                method: method,
                url: path,
                headers: {                          
                    'Content-Type' :  'application/x-www-form-urlencoded'
                },
                data : jQuery.param(data)
            }); 




        }

});

并且习惯将其称为

 api.http('POST','your_path', data).success(function(result){ });

Answer 2

＆＃13;

angular.module('myApp', [])

.factory('ipFactory', ['$http',
  function($http) {
    var service = {
      getIp: function() {
        return $http.get('http://ip.jsontest.com/', {
            cache: true
          })
          .then(function(data) {
            return data.data.ip;
          });
      }
    }

    return service;
  }
])

.controller('ControllerOne', ['$scope', 'ipFactory',
  function($scope, ipFactory) {
    ipFactory.getIp()
      .then(function(ip) {
        $scope.ipAddress = ip;
      });
  }
])

.controller('ControllerTwo', ['$scope', 'ipFactory',
  function($scope, ipFactory) {
    ipFactory.getIp()
      .then(function(ip) {
        $scope.ipAddress = ip;
      });
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="ControllerOne">
    {{ipAddress}}
  </div>
  <div ng-controller="ControllerTwo">
    {{ipAddress}}
  </div>
</body>

＆＃13;

Answer 3

作为一种风格问题，函数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来处理该事件。< / p>

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

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

注意：$broadcast会将事件从rootcope广播到子范围。

在 ProductDetailController 中，我们会收听此事件：

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

如何在我的情况下设置服务的角度

3 个答案: