Aktualisieren Sie ui-router anzeigen, wenn sich der Zustand Parameter ändern?

Was ist die richtige Methode zum aktualisieren einer ui-router anzeigen, wenn sich der Zustand Parameter ändern?

Beispielsweise, wenn ich habe ein Staat wie:

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

Und eine (falsche) controller, die wie folgt aussieht:

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

Wie kann ich korrekt laden Sie eine neue $scope.page wenn die $state.slug verpasst?

Hinweis, dass die oben nicht funktioniert, wenn Sie sich von Seite zur anderen, weil der controller wird nur einmal ausgeführt, wenn die erste Seite geladen.

InformationsquelleAutor David Wolever | 2014-11-26
  1. 10

    Ich würde so etwas tun:

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

    Ich wäre neugierig, wenn Sie einen besseren Weg finden - es kann ein Weg sein, um genau beobachten Sie den Wert der staatlichen slug, aber dieses ist sauber und klar artikuliert, was es ist, dass Sie Sie zu beobachten.

    • Diese... würde auf jeden Fall funktionieren. Aber... verdammt, es fühlt sich ein bisschen wie ein Schwergewichts-Lösung für das, was ich annehmen würde — vielleicht naiv? — zu einem außergewöhnlich häufiges problem.
    • Es ist überhaupt nicht im Schwergewicht, aber du hörst ein einfaches Ereignis, das ist schon gefeuert. Es geht um die leichteste Lösung für dieses problem, das ich denken kann. $scope.$Uhr mit einer Funktion ist das hinzufügen viel mehr Aufwand, würde ich meinen.
    • Äh, sorry, ich meine Schwergewicht im Sinne von "es fühlt sich an wie eine seltsame Lösung, welche ein häufiges problem"?
    InformationsquelleAutor Myk
  2. 2

    Ich bin wirklich nicht voll sicher, ob ich nicht etwas vermissen hier - aber-basierend auf snippets-dargestellt, die in Ihrer Frage:

    • PageCtrl ist in Bezug auf Status " - Seite.view" und wird ausgeführt, so oft wie " - Seite.Blick" - Zustand wird ausgelöst
    • "page.view" Staat erklärt hat, param slug - url: "/pages/:slug",, die trigger Zustand zu ändern - wenn es geändert wird
    • Wenn die oben genannten wahr ist (wenn ich nicht beaufsichtigen etwas) können wir verwenden stateConfig Einstellung - auflösen
    • gibt es keine Notwendigkeit zu verwenden $state.params. Wir können $stateParams (mehr UI-Router Weg, würde ich persönlich sagen)

    Gut, wenn alle, die richtige ist, wie gezeigt, in diese arbeiten plunker, wir können es so machen

    resolver:

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

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

}];

    Angepasst state def:

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

    Und die PageCtrl:

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

    Überprüfen Sie alle in Aktion hier

    • Dies scheint zwar der richtige Weg, es zu tun, es funktioniert nicht, wenn Sie den gleichen controller verwenden in einigen Richtlinie. 🙁
    InformationsquelleAutor Radim Köhler
  3. 1

    Ich hatte dieses problem in ui-router 0.2.14. Nach dem Upgrade auf 0.2.18 einen parameter ändern, nicht das Feuer der erwarteten $stateChange* Veranstaltungen.

    InformationsquelleAutor joeforker
Schreibe einen Kommentar