Mit angular.js mit ui-Router, wie nur eine Ansicht neu zu laden?

Question

Ich habe eine ziemlich einfache Todo-App mit angular.js, für die ich die UI-Router-Bibliothek verwende. Ich habe das ui-Router-Beispiel auf github (https://github.com/angular-ui/ui-router/tree/master/sample) durchgesehen, konnte aber nicht herausfinden, was ich falsch mache. In meiner App habe ich eine Sidebar-Navigationsansicht (mit der Liste der Dinge todo) und eine Inhaltsansicht (die die Details des todo-Elements anzeigt, wenn darauf geklickt wird). Das Problem, das ich habe, ist, dass, wenn ich zu/todo/exampleItem navigiere, die Inhaltsansicht aktualisiert und das Navigationsfeld auch neu geladen wird. Dies wirkt sich nicht auf die Funktionalität der App aus, aber ich möchte vermeiden, dass die Navigationsleiste jedes Mal flackert, wenn Sie auf ein Element klicken.

Hier ist mein Code, um die Zustandsänderungen zu handhaben:

app.config(function ($stateProvider) { 
    $stateProvider 
    .state('todo', { 
     url: "/todo", 
     views: { 
      "navPanel": { 
       templateUrl: "./navPanel.html", 
       controller: 'PanelController' 
      } 
     } 
    }) 
    .state('todo/:item', { 
     url: "/todo/:item", 
     views: { 
      "PanelView": { 
       templateUrl: "./navPanel.html", 
       controller: 'PanelController' 
      }, 
      "ContentView": { 
       templateUrl: "./content.html", 
       controller: 'ContentController' 
      } 
     } 
    }) 

}); 

In meiner index.html meine Ansichten sind wie folgt festgelegt:

<div class="column" data-ui-view="PanelView"></div> 
    <div class="column" data-ui-view="ContentView"></div> 

Gibt es irgendeine Weise, die ich die navPanel stoppen Ansicht, dass jedes Mal, wenn ein neues Objekt angeklickt wird, neu geladen wird?

Answer 1

Basierend auf der gestimmt Antwort dieser Frage angularjs ui-router - how to build master state which is global across app

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider 
    .state('todo', { 
     abstract: true, 
     views: { 
      "navPanel": { 
       templateUrl: "./navPanel.html", 
       controller: 'PanelController' 
      } 
     } 
    }) 
    .state('todo/:item', { 
     url: "/todo/:item", 
     views: { 
      "ContentView@": { 
       templateUrl: "./content.html", 
       controller: 'ContentController' 
      } 
     } 
    }) 

}]);