Angularjs - Laden von Daten mit einem Service zeigt die Daten der vorherigen Seite und nicht die aktuelle

Question

Ich habe ein seltsames Verhalten auf meinem angularjs App.

Grundsätzlich habe ich einen Dienst, der Daten aus einer JSON-Datei lädt.

Ich habe zwei Optionen von diesem Service:

1- laden alle Daten

2- Legen Sie nur die Daten, die ich auf der URL basiert brauchen ist

Hier ist der Service code:

.service ('myService', ['$http', '$stateParams', '$q', function ($http, $stateParams, $q){ 

    var myService = this; 
    var defer = $q.defer(); 

    myService.all = {}; 
    myService.one = {}; 

    myService.all = function(){ 
    $http.get('data.json').success(function (res){ 
     myService.all = res.data; 
     defer.resolve(res.data) 
    }) 
    return defer.promise; 
    } 
    myService.one = function (urlID){ 
    $http.get('data.json').success(function(res) { 
     angular.forEach(res.data, function(item) { 
     console.log (item, parseInt(urlID)) 
     if (item.id === parseInt(urlID)) { 
      console.log("id equality: true") 
      myService.oneZone = item; 
     } else {console.log("id equality: false")} 

     }); 
    }); 
    return defer.promise 
    } 

    return myService; 
}]) 

und dann rufe ich dies von meinem controller:

.controller('detailsCtrl', ['$scope', '$stateParams', 'myService', function($scope, $stateParams, myService) { 
    $scope.fromURL = $stateParams.myID 
    myService.one($scope.fromURL).then(function(res){ 
     $scope.onlyOne = myService.oneZone 
    })  
}]) 

aber die Daten in einer falschen Weise angezeigt.

Es ist viel einfacher ist es, hier in Aktion zu sehen: https://plnkr.co/edit/qBtT5gkVSkYfjbngZVqw?p=preview

Um dies zu reproduzieren, ist hier, was Sie zu tun haben:

1- Einmal geöffnet, klicken Sie auf eine beliebige Taste (zum Beispiel)

2- folgende Seite einen leeren Rahmen haben (so genannte OnlyOne)

3- gehen Sie zurück, und klicken Sie auf eine andere Taste (Zum Beispiel)

4- OnlyOne Umfang ist von der ersten gedrückten Taste()

warum es dies zu tun?

dank

Answer 1

Das Problem ist, dass Sie ein anderes Versprechen für myService.one erstellen und lösen müssen.Hier

myService.one = function (urlID){ 
    var defer = $q.defer(); 
    $http.get('data.json').success(function(res) { 
     angular.forEach(res.data, function(item) { 
     console.log (item, parseInt(urlID)) 
     if (item.id === parseInt(urlID)) { 
      console.log("id equality: true") 
      myService.oneZone = item; 
     } else {console.log("id equality: false")} 

     }); 
     defer.resolve(myService.oneZone); 
    }); 
    return defer.promise 
    } 

ist die Arbeits plnkr https://plnkr.co/edit/TgClvkqUFL7g9KGiug4m?p=preview

Answer 2

Versprechen nur einmal aufgelöst werden können, und es wird immer den gleichen Wert zurück. Wenn Sie den aufgelösten Wert ändern möchten, müssen Sie ein neues Versprechen erstellen. Neben versprechen hier überflüssig ist, können Sie den Code vereinfachen:

myService.all = function(){ 
    return $http.get('data.json').success(function (res){ 
     myService.all = res.data; 
     return res.data; 
    }) 
} 

Und auch .success Methode veraltet ist, sollten Sie .then verwenden.

Mit .then es wohl so aussehen wird:

myService.all = function(){ 
    return $http.get('data.json').then(function (res){ 
     myService.all = res.data.data; 
     return res.data.data; 
    }) 
} 

Und eine weitere Sache, können Sie zweite Funktion ändern:

myService.one = function (urlID){ 

    return $http.get('data.json').success(function(res) { 
     angular.forEach(res.data, function(item) { 
     console.log (item, parseInt(urlID)) 
     if (item.id === parseInt(urlID)) { 
      console.log("id equality: true") 
      myService.oneZone = item; 
     } else {console.log("id equality: false")} 

     }); 

     return myService.oneZone; 
    }); 

    } 

Angular automatisch Rückkehr von .success Anruf wickeln in gelöstes Versprechen;