Holen Sie sich stateParams auf ändern ohne reload

Mache ich eine app mit angular ui router.

Beim navigieren zu einem bestimmten Zustand, die hat immer ein Parameter übergeben werden, ich muss in der Lage sein zu ändern die url und die Parameter aktualisiert ohne Neuladen der Ansicht.

In meinem Staat config die ich verwende:
reloadOnSearch: false

Dies funktioniert und mir erlaubt, aktualisieren Sie die Parameter in der URL ohne Seite neu zu laden.

Allerdings muss ich benachrichtigt werden über diese änderungen auf der $stateParams, so kann ich die verschiedenen Methoden, die die Dinge mit den neuen Daten.

Irgendwelche Vorschläge?

Dank, James

  • Sie tun können, $scope.$sehen Sie auf $stateParams
  • Das funktioniert nicht..
  • Können Sie das Feuer aus eine ändern-Funktion auf der $routeUpdate Veranstaltung? Sollte es ausgestrahlt werden, das auf einer URL-update-wen reloadOnSearch ist false.
InformationsquelleAutor jameslouiz | 2014-07-26
  1. 4

    Dies ist relevant für mich, also habe ich ein bisschen arbeiten.

    Hier ist mein Staat, der verwendet reloadOnSearch sondern feuert aus einer Funktion jedes mal die URL aktualisiert.

          .state('route2.list', {
          url: "/list/:listId",
          templateUrl: "route2.list.html",
          reloadOnSearch: false,
          controller: function($scope, $stateParams){
            console.log($stateParams);
            $scope.listId = $stateParams.listId;
            $scope.things = ["A", "Set", "Of", "Things"];
            //This will fire off every time you update the URL.
            $scope.$on('$locationChangeSuccess', function(event) { 
                $scope.listId = 22;
                console.log("Update");
                console.log($location.url()); 
                console.log($stateParams);    
                });
          }
      }

    Gibt in der Konsole:

    Update
/route2/list/7 (index):70
Object {listId: "8"} (index):71

    $locationChangeStart und $locationChangeSuccess sollten, erhalten Sie, wo Sie gehen wollen. Beachten Sie, dass Ihre Lage Funktionen wird immer das Feuer aus, auch auf der ersten laden.

    Inspiration genommen von diese SO ein post und die $location Dokumentation

    EDIT 2
    Nach der Angular-Dokumentation für ngRoute, $routeParams nicht aktualisiert, bis nach dem Erfolg der änderungen. Die Chancen sind, dass ui-route hat eine ähnliche Beschränkung. Da wir inturrupting die Auflösung des Staates, $stateParams nie aktualisiert. Was Sie tun können, ist nur emulieren, wie $stateParams übergeben werden, in Erster Linie mit $urlMatcherFactory.

    Etwa so:

          .state('route2.list', {
          url: "/list/:listId",
          templateUrl: "route2.list.html",
          reloadOnSearch: false,
          controller: function($scope, $stateParams, $state, $urlMatcherFactory){
            console.log($stateParams.listId + " :: " + $location.url());
            $scope.listId = $stateParams.listId;
            $scope.things = ["A", "Set", "Of", "Things"];
            $scope.$on('$locationChangeSuccess', function(event) { 
                $scope.listId = 22;
                //For when you want to dynamically assign arguments for .compile
                console.log($state.get($state.current).url); //returns /list/:listId
                //plain text for the argument for clarity
                var urlMatcher = $urlMatcherFactory.compile("/route2/list/:listId");
                //below returns Object {listId: "11" when url is "/list/11"} 
                console.log(urlMatcher.exec($location.url())); 
                var matched = urlMatcher.exec($location.url());
                //this line will be wrong unless we set $stateParams = matched
                console.log("Update " + $stateParams.listId);
                console.log($location.url());
                //properly updates scope.
                $scope.listId = matched.listId;
                });
          }
      })

    Rahmen eigentlich updates, also ist das eine gute Sache. Die Sache zu erinnern ist, dass Sie stoppng die normale Auflösung von alles, aber die Einstellung reloadOnSearch zu false so müssen Sie behandeln so ziemlich alles, was auf Ihrem eigenen.

    • Hallo, vielen Dank für die Zeit nehmen, um mir zu helfen.. Dies ist sicher ein Schritt in die richtige Richtung. So, jetzt habe ich ein event mit zu spielen, wie bekomme ich die neuen Parameter nach der änderung? $stateParams nicht aktualisiert
    • Lage ist immer noch verfügbar, wenn Sie passieren in. Sie können die route unter Verwendung Ihrer Funktionen, oder etwas ähnliches. Hinweis die Verwendung $locationChangeStart und reloadOnSearch du bist ziemlich beenden eines scope-updates. $scope.$apply() wird wahrscheinlich dein Freund sein mit diesem als gut. Auch müssen Sie $locationChangeSuccess wenn Sie wollen, dass die endgültige URL.
    • Ja, ich verstehe, dass, aber ich muss ein Objekt zurückgeben, wie die $stateParams obj. Nicht angular-ui haben Sie irgendeine Art von Methode, die tatsächlich bekommt die stateparams?
    • Edit 2 oben ist. Selbst wenn jemand kommt zusammen mit einer line Weg, dies zu tun, ich habe viel gelernt darüber, wie ui-router funktioniert.
    • Roman! Vielen Dank das ist genau das was ich Suche! Ich werde dies in einen service 🙂
    InformationsquelleAutor Roman K.
  2. 1

    Folgenden Römer-code, baute ich einen service, gibt der Staat params, der den aktuellen Stand

    /**
 * Get parameters from URL and return them as an object like in ui-router
 */
eventaApp.service( 'getStateParams', ['$urlMatcherFactory', '$location', '$state', function(     $urlMatcherFactory, $location, $state ){
  return function() {

    var urlMatcher = $urlMatcherFactory.compile($state.current.url);
    return urlMatcher.exec($location.url());

  }

}]);
    InformationsquelleAutor jameslouiz
Schreibe einen Kommentar