2013-12-14 11 views
14

Ich bin neu sowohl Angular und der UI-Router. Wenn jemand ein Modell auswählt und mein Controller eine Standard-SHOW-Methode ausführt, möchte ich einfach die URL aktualisieren, um die ID des Modells aufzunehmen, ohne die Seite zu aktualisieren, und fahre mit meiner ursprünglichen Ansicht fort. Ich bin mir nicht sicher, wie dies zu tun ...Angular/UI-Router - Wie kann ich die URL aktualisieren, ohne alles zu aktualisieren?

$stateProvider 
     .state('citylist', { 
      url: "/", 
      templateUrl: "views/index.html" 
     }) 
     .state('cityshow', { 
      url: "/city/:id", 
      templateUrl: "views/index.html" 
     }) 

angular.module('app.system').controller('IndexController', ['$scope', 'Global', 'Cities', '$stateParams', '$location', function ($scope, Cities, $stateParams, $location) { 

    $scope.loadTown = function(id) { 
     Cities.get({id: id }, function(city) { 
      $scope.city = city 
      // Change URL 
      // Do things within the same view... 
     }); 
    }; 
}); 

<button ng-click="loadTown(123456)">Chicago</button> 

Antwort

6

Der Code-Schnipsel Sie sind Einstellungen ein bisschen weit von dem richtigen ui-Router verwendet haben. Ich würde vorschlagen, überprüfen Sie diese Demo-Anwendung: http://angular-ui.github.io/ui-router/sample/#/contacts/1. Hier können wir sehen, wie die Liste "behoben" ist, während Detail ohne Seitenaktualisierung geändert wird.

Der Code dieses Beispiels hier herunterladen https://github.com/angular-ui/ui-router/tree/master/sample.

Was viel WIE (mit Ausnahme der wiki) zu verstehen, war dieser Code-Schnipsel helfen sollte: state.js. Laden Sie die Demo, lesen Sie diese kommentierte Erklärung durch. Und ui-router macht Sinn ...

+2

diskutiert Ich bin sicher, Sie haben das gesehen: http://egghead.io/lessons/angularjs-introduction-ui-router Radim Beratung ist gut. Die meisten Artikel, Plunker und Artikel sind bereits veraltet und obwohl es nichts wirklich schwer an dem Ui-Router gibt, dauert es eine Weile, bis man die richtige Quelle findet. – scalaGirl

+0

@radim: löst das wirklich die ursprüngliche Frage - nämlich, wie man ein Modell und eine URL aktualisiert, aber ohne eine Ansicht zu aktualisieren? Das ist die Frage, die ich bei http://stackoverflow.com/questions/27467170/angular-ui-router-update-url-without-view-refreshes nachgefragt habe –

1

Im Wesentlichen, was Sie tun möchten, ist nicht, um den Stadtcode in die UI-Ansicht und/oder nicht eine Vorlage mit dieser Ansicht zu verwenden. Als Ergebnis wird keiner der DOM geändert, aber die URL wird. Dies wird ausführlicher auf Angular-ui.router: Update URL without view refresh

Verwandte Themen