Z plikiem angular.js za pomocą interfejsu użytkownika, jak przeładować tylko jeden widok?

Question

Mam dość prostą aplikację todo przy użyciu pliku angular.js, do którego używam biblioteki interfejsu użytkownika. Przejrzałem przykład routera na github (https://github.com/angular-ui/ui-router/tree/master/sample), ale nie mogłem ustalić, co robię źle. W mojej aplikacji mam widok nawigacji po pasku bocznym (z listą rzeczy todo) i widok zawartości (który wyświetla szczegóły pozycji todo po kliknięciu). Problem polega na tym, że po przejściu do/todo/exampleItem aktualizacje widoku zawartości i panel nawigacji są również ponownie ładowane. Nie ma to wpływu na funkcjonalność aplikacji, ale chciałbym uniknąć migotania panelu nawigacyjnego za każdym kliknięciem elementu.

Oto mój kod do obsługi zmiany Stan:

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' 
      } 
     } 
    }) 

}); 

w moim index.html moje poglądy są określone w następujący sposób:

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

Czy jest jakiś sposób mogę zatrzymać navPanel widok z ponownego ładowania za każdym razem, gdy kliknięto nowy element?

Answer 1

podstawie głosowało odpowiedź na to pytanie 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' 
      } 
     } 
    }) 

}]);