Odśwież widok interfejsu użytkownika, gdy zmieniają się parametry stanu?

Question

Jaki jest poprawny sposób aktualizowania widoku ui-routera po zmianie parametrów stanu?

Na przykład, jeśli mam stan jak:

.state("page.view", { 
    url: "/pages/:slug", 
    views: { 
     "": { 
      controller: "PageCtrl", 
      templateUrl: "page-view.html", 
     }, 
    }, 
}) 

I w (błędnym) kontrolera, który wygląda tak:

.controller("PageCtrl", function($scope, $state) { 
    $scope.page = loadPageFromSlug($state.params.slug); 
}) 

Jak mogę poprawnie załadować nowy $scope.page gdy jest zmiany $state.slug?

Uwaga: W takim przypadku powyższe polecenie nie działa podczas przechodzenia ze strony na inną, ponieważ kontroler uruchamia się tylko raz, po załadowaniu pierwszej strony.

Answer 1

chciałbym zrobić coś takiego:

.controller("PageCtrl", function($scope, $state) { 
    $scope.$on("$stateChangeSuccess", function updatePage() { 
     $scope.page = $state.params.slug; 
    });  
}); 

byłbym ciekaw, czy można znaleźć lepszy sposób - może być jakiś sposób, aby po prostu obserwować wartość ślimak państwowej, ale jest czysty i Wyraźnie wyraŜa, na co patrzysz.

Answer 2

Jestem naprawdę nie do końca pewny, czy nie brakuje czegoś tutaj - ale, na podstawie fragmentów pokazanych na zapytanie:

• PageCtrl jest związane z państwowego „page.view” i będzie działać tyle razy, ile „page.view” stan jest wyzwalany
• "page.view" stan ogłosił param ślimak - url: "/pages/:slug",, co spowoduje zmianę stanu - zawsze, gdy zmienia się
• Jeśli powyższe jest prawdą (jeśli Nie nadzoruję czegoś) możemy użyć ustawienia stateConfig - resolve
• nie trzeba używać $state.params. Możemy użyć $stateParams (więcej UI-Router sposób bym osobiście powiedzmy)

Dobrze, jeśli wszystko, co jest prawdziwe, jak to pokazano na this working plunker, możemy to zrobić jak ten

rezolwerem:

var slugResolver = ['$stateParams', '$http' 
        , function resolveSlug($stateParams, $http){ 

    return $http 
    .get("slugs.json") 
    .then(function(response){ 
     var index = $stateParams.slug; 
     return response.data[index]; 
    }); 

}]; 

stan Skorygowany def:

.state("page.view", { 
    url: "/pages/:slug", 
    views: { 
     "": { 
     controller: "PageCtrl", 
     templateUrl: "page-view.html", 
     resolve: { slug : slugResolver }, 
     }, 
    }, 
}) 

A PageCtrl:

.controller('PageCtrl', function($scope,slug) { 
    $scope.slug = slug; 
}) 

Sprawdź to wszystko w akcji here

Answer 3

miałem tego problemu w UI-routera 0.2.14. Po uaktualnieniu do wersji 0.2.18 zmiana parametru uruchamia oczekiwane zdarzenia $stateChange*.