我AngularJS服務沒有更新時，用戶點擊鏈接不同的$ routeParams

Question

我在angularJS中使用服務獲取JSON對象，並將其傳遞給控制器​​，只要用戶點擊特定鏈接，/match/id-:matchId'，它使用$routeParams:matchId來選擇要請求的JSON對象。

問題一旦用戶點擊一個/match/id-:matchId'鏈接，然後嘗試使用URL中的不同ID進行另一次匹配，JSON對象不會改變，它仍然是一樣的。如果用戶刷新頁面，那麼他們將在頁面上獲得正確的JSON對象。

下面的代碼：

var app = angular.module('app', ['ngRoute']); // TODO: 'ngAnimate', 'ui.bootstrap' 

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){ 

    $routeProvider 
     .when('/', { 
      templateUrl: '/app/static/home.html', 
      controller: 'mainController as mainCtrl' 

     }) 
     .when('/match/id-:matchId', { 
      templateUrl: '/app/components/match/matchView.html', 
      controller: 'matchController as matchCtrl' 
     }); 

    // use the HTML5 History API 
    $locationProvider.html5Mode(true); 
}]); 

app.controller('matchController', ['$routeParams', 'matchService', function ($routeParams, matchService) { 
    var matchCtrl = {}; 

    var promise = matchService.getMatch($routeParams.matchId); 
    promise.then(function (data) 
    { 
     matchCtrl.match = data; 
    }); 
}]) 

app.service("matchService", function ($http, $q) 
{ 
    var deferred = $q.defer(); 

    function getMatch(matchId) { 
     var url = 'https://jsonplaceholder.typicode.com/posts/' + matchId; 
     return $http({ 
     method: 'GET', 
     // cache: true, 
     url: url, 
     headers: { 
      'Content-Type': 'application/json;charset=UTF-8' 
     } 
     }). 
     then(function(response) { 
     //your code when success 
     // lgTblCtrl.amateurTable = data; 
     deferred.resolve(response); 
     console.log('SUCCESS!'); 
     }, function(response) { 
     //your code when fails 
     console.log('ERROR!'); 
     deferred.reject(response); 
     }); 

     return deferred.promise; 
    } 

    this.getMatch = getMatch; 
}) 

沒有控制檯錯誤，但是當我把斷點在瀏覽器的源面板，我可以看到，當用戶刷新頁面的代碼獲取的調用順序不同。這是特定的代碼行取決於用戶如何登陸頁面上運行的順序，通過點擊按鈕或刷新頁面：

瀏覽器刷新

1. var promise = matchService.getMatch($routeParams.matchId);
2. return deferred.promise;
3. deferred.resolve(response);
4. matchCtrl.match = data;

點擊一個鏈接

1. var promise = matchService.getMatch($routeParams.matchId);
2. return deferred.promise;
3. matchCtrl.match = data;
4. deferred.resolve(response);

我是新來AngularJS，我缺少的是在這裏嗎？

Answer 1

這看起來像是一個問題，因爲你的'延遲'變量減速。承諾在第一次被正確地返回，但是隨着承諾第一次被解決，每當函數被再次調用時，承諾立即解決。

請嘗試以下，看看是否能解決您的問題，承諾的聲明遷入功能：

app.service("matchService", function ($http, $q) { 

function getMatch(matchId) { 
    var deferred = $q.defer(); 
    var url = 'https://jsonplaceholder.typicode.com/posts/' + matchId; 
    return $http({ 
    method: 'GET', 
    // cache: true,