$ HTTP-Antwort im Dienst verarbeiten

Hier ist ein Zupfen das tut, was Sie wollen: http://plnkr.co/edit/TTlbSv?p=preview

Die Idee ist, dass Sie Ihre Arbeit mit dem Versprechen, direkt und Ihre "dann" - Funktionen zu manipulieren und Zugriff auf die asynchron zurückgegebenen Antworten.

app.factory('myService', function($http) {
  var myService = {
    async: function() {
      //$http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('test.json').then(function (response) {
        //The then function here is an opportunity to modify the response
        console.log(response);
        //The return value gets picked up by the then in the controller.
        return response.data;
      });
      //Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  //Call the async method and then do stuff with what is returned inside our own then function
  myService.async().then(function(d) {
    $scope.data = d;
  });
});

Hier ist eine etwas kompliziertere version, die caches die Anfrage, so dass Sie nur machen es zum ersten mal (http://plnkr.co/edit/2yH1F4IMZlMS8QsV9rHv?p=preview):

app.factory('myService', function($http) {
  var promise;
  var myService = {
    async: function() {
      if ( !promise ) {
        //$http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('test.json').then(function (response) {
          //The then function here is an opportunity to modify the response
          console.log(response);
          //The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      //Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  $scope.clearData = function() {
    $scope.data = {};
  };
  $scope.getData = function() {
    //Call the async method and then do stuff with what is returned inside our own then function
    myService.async().then(function(d) {
      $scope.data = d;
    });
  };
});

InformationsquelleAutor der Antwort Pete BD

Weil es asynchron ist, wird die $scope immer die Daten vor dem ajax-Aufruf abgeschlossen ist.

Könnten Sie $q in Ihrem Dienst zu erstellen promise und geben es zurück an
controller, und controller erhalten Sie das Ergebnis innerhalb von then() Aufruf gegen promise.

In Ihren Dienst,

app.factory('myService', function($http, $q) {
  var deffered = $q.defer();
  var data = [];  
  var myService = {};

  myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
      console.log(d);
      deffered.resolve();
    });
    return deffered.promise;
  };
  myService.data = function() { return data; };

  return myService;
});

Dann, in Ihrem controller:

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function() {
    $scope.data = myService.data();
  });
});

InformationsquelleAutor der Antwort Tosh

Einen viel besseren Weg, denke ich, wäre so etwas wie dieses:

Service:

app.service('FruitsManager',function($q){

    function getAllFruits(){
        var deferred = $q.defer();

        ...

        //somewhere here use: deferred.resolve(awesomeFruits);

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

Und in dem controller können Sie einfach verwenden:

$scope.fruits = FruitsManager.getAllFruits();

Winkel wird automatisch die gelöst awesomeFruits in die $scope.fruits.

InformationsquelleAutor der Antwort HasanAboShally

Beim binden der UI in array werden Sie wollen, stellen Sie sicher, aktualisieren Sie das gleiche array direkt, indem Sie die Länge auf 0 und drücken der Daten in das array.

Statt (was eine andere array-Referenz zu data die Ihre UI nicht kennen):

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
    });
  };

versuchen Sie dies:

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data.length = 0;
      for(var i = 0; i < d.length; i++){
        data.push(d[i]);
      }
    });
  };

Hier ist ein Turnschuh , dass zeigt den Unterschied zwischen der Einstellung eines neuen array-vs Entleerung und hinzufügen zu einem bestehenden ein. Ich konnte Sie nicht bekommen Ihr plnkr arbeiten doch hoffentlich für Sie arbeitet!

InformationsquelleAutor der Antwort Gloopy

Habe ich gelesen http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/
[AngularJS ermöglicht uns die Optimierung unseres controller-Logik, indem Sie ein Versprechen, die direkt auf den Rahmen, anstatt manuell die übergabe der aufgelösten Wert in einem Erfolgs-callback.]

so einfach und praktisch 🙂

var app = angular.module('myApp', []);
            app.factory('Data', function($http,$q) {
                return {
                    getData : function(){
                        var deferred = $q.defer();
                        var promise = $http.get('./largeLoad').success(function (response) {
                            deferred.resolve(response);
                        });
                        //Return the promise to the controller
                        return deferred.promise; 
                    }
                }
            });
            app.controller('FetchCtrl',function($scope,Data){
                $scope.items = Data.getData();
            });

Hoffe, dass dies helfen

InformationsquelleAutor der Antwort Whisher

Soweit Zwischenspeicherung der Antwort in Hinblick auf den service , hier ist eine andere version, die scheint mehr geradlinig als das, was ich bisher gesehen habe:

App.factory('dataStorage', function($http) {
     var dataStorage;//storage for cache

     return (function() {
         //if dataStorage exists returned cached version
        return dataStorage = dataStorage || $http({
      url: 'your.json',
      method: 'GET',
      cache: true
    }).then(function (response) {

              console.log('if storage don\'t exist : ' + response);

              return response;
            });

    })();

});

dieser Dienst zurückkehren wird entweder die Cache-Daten oder $http.get;

 dataStorage.then(function(data) {
     $scope.data = data;
 },function(e){
    console.log('err: ' + e);
 });

InformationsquelleAutor der Antwort maioman