Mein AngularJS-Dienst wird nicht aktualisiert, wenn der Benutzer auf einen Link mit verschiedenen $ routeParams klickt

Question

Ich benutze einen Dienst in angularJS, der ein JSON-Objekt erhält und an einen Controller weiterleitet, wenn ein Benutzer auf einen bestimmten Link klickt, /match/id-:matchId', verwendet den $routeParams von Wählen Sie :matchId, um auszuwählen, welches JSON-Objekt angefordert werden soll.

Das Problem es einmal klickt der Benutzer eine /match/id-:matchId' Link und dann versucht, zu einer anderen Übereinstimmung mit einer anderen ID in der URL gehen, das JSON-Objekt ändert sich nicht, es bleibt gleich. Wenn der Benutzer die Seite aktualisiert hat, erhält er das richtige JSON-Objekt auf der Seite.

Hier ist der Code:

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

Es gibt keine Konsole Fehler, aber wenn ich Haltepunkte in der Chromquelle Platte legen kann ich sehen, dass, wenn der Benutzer die Seite aktualisiert die in einer anderen Reihenfolge genannt Code. Dies ist die Reihenfolge bestimmte Zeilen Code ausgeführt werden, je nachdem, wie der Benutzer landete auf einer Seite, durch Klicken auf eine Schaltfläche oder die Seite aktualisieren:

Browser Refresh

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

Klick auf einen Link

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

Ich bin neu in AngularJS, Was bin ich hier?

Answer 1

Das sieht wie ein Problem mit Ihrer Verzögerung Ihrer 'zurückgestellten' Variable aus. Das Versprechen wird beim ersten Mal korrekt zurückgegeben, aber es löst sich sofort wieder auf, wenn die Funktion erneut aufgerufen wird, da das Versprechen beim ersten Mal aufgelöst wird.

folgendes zu sehen Versuchen Sie, wenn es Ihr Problem behebt, bewegt die Deklaration der Versprechen in die Funktion:

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,