угловой, как установить службы в моем случае

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

В зависимости от стиля функция getTargetProduct не нужен весь этот шаблонный код с обещаниями. Вы хотите вернуть простое обещание обернуть ваши локальные данные 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 
} 

Answer 2

может быть, ваша ситуация не так же, как, как я, но я сделал сервис для моего $ 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 3

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>