angular 我的情况如何设置服务

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

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

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

Answer 3

作为风格问题，函数 getTargetProduct 不需要所有这些带有承诺的样板代码。您想要 return 包装本地数据的简单承诺 targetProduct。函数可以更简洁：

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

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

控制器NavController（获取产品如下：

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

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

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

解决方案一：嵌套控制器

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

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

如果两个控制器没有父子关系，可以使用$broadcast广播updateTargetProduct事件，$on处理该事件。

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

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

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

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

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

angular 我的情况如何设置服务

angular how to set services in my case

javascript

service

angularjs