Angularjs - 使用服務加載數據顯示的是前一頁的數據，而不是當前的數據

Question

我在我的angularjs應用程序中遇到了一個奇怪的行爲。

基本上，我有一個從JSON文件加載數據的服務。

我從這項服務中兩個選項：

1加載所有數據

2 - 僅加載，我需要基於URL

這裏的數據是服務代碼：

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

然後我從我的控制器調用這個：

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

但數據顯示錯誤。

這是比較容易的方式看到它在這裏的行動：https://plnkr.co/edit/qBtT5gkVSkYfjbngZVqw?p=preview

要重現此，這裏是你必須做的：

1 - 一旦打開，點擊任何按鈕（例如）

2-在下頁將有一個空範圍（稱爲onlyOne）

3-回去並點擊另一按鈕（例如）

4- onlyOne範圍是從你按下第一按鈕（）

爲什麼它這樣做呢？

謝謝

Answer 1

問題是你必須爲myService.one創建另一個承諾並解決它。

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 
    } 

這裏是工作plnkr https://plnkr.co/edit/TgClvkqUFL7g9KGiug4m?p=preview

Answer 2

承諾只能解決一次，它會始終返回相同的值。如果你想改變解決的價值，你必須創造新的承諾。除了承諾在這裏是多餘的，您可以簡化代碼到：

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

而且.success方法已被廢棄，您應該使用.then。

有了。那麼它很可能是這個樣子：

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

還有一件事，你可以改變第二功能：

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

    } 

角將自動換行.success調用的返回成爲解決的承諾;