Navigation Probleme zu Angular UI-Router Zustand

Question

ich eine Route Definition haben wie folgt:

 $stateProvider 
      .state('vehicles', { 
      url: '/vehicles', 
      templateUrl: 'foo/bar1.html' 
     }).state('vehicles.id', { 
      url: '/{id}', 
      templateUrl: 'foo/bar3.html' 
     }).state('vehicles.create', { 
      url: '/create', 
      templateUrl: 'foo/bar2.html', 
      controller: 'VehicleCreateController' 
     }); 

Ich habe einen Knopf, der tut

$state.go("vehicles.create"); 

Das Problem ist, dass während die URL ändert sich richtig, die Seite bleibt gleich. Erst nach dem zweiten Klick erscheint die korrekte Vorlage.

Answer 1

Nach einem Hinweis von meinem Kollegen erkannte ich, dass es die Zustandsdefinitionen waren, die das Problem verursachten. Umsortieren der Zustände von "spezifischer" (URL-weise - d./Create) zu weniger spezifisch (/ {id}) tat den Trick. Also die Sache, die falsch war, war die generischere URL/vehicles/{id} vor der sehr ähnlichen, aber weniger generischen/vehicles/create.

Also hier ist die verbesserte Version:

 $stateProvider 
      .state('vehicles', { 
      url: '/vehicles', 
      templateUrl: 'foo/bar1.html' 
     }).state('vehicles.create', { 
      url: '/create', 
      templateUrl: 'foo/bar2.html', 
      controller: 'VehicleCreateController' 
     }).state('vehicles.id', { 
      url: '/{id}', 
      templateUrl: 'foo/bar3.html' 
     }); 

Answer 2

Verwendung : für Ihren params und ?, um diese Parameter optional zu machen, wenn Sie brauchen.

Überprüfen Sie das folgende Code-Snippet, für das Routing mit Parametern.

$stateProvider 
.state('contacts.detail', { 
    url: "/contacts/:contactId", 
    templateUrl: 'contacts.detail.html', 
    controller: function ($stateParams) { 
     // If we got here from a url of /contacts/42 
     expect($stateParams).toBe({contactId: "42"}); 
    } 
}) 

check this for more clear view on routing.