ユーザーが別の$ routeParamsでリンクをクリックしたときにAngularJSサービスが更新されない

Question

angleJSのサービスを使用してJSONオブジェクトを取得し、ユーザーが特定のリンクをクリックするたびに/match/id-:matchId'、$routeParams:matchIdを使用して、要求するJSONオブジェクトを選択します。

ユーザーが1つの/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;

私はAngularJSに新たなんだリンク

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

オン

をクリックして、私はここで何をしないのですか？

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,