Остановить общий шаблон от перезагрузки

Question

У меня есть Угловое приложение, которое зависит от Углового ui-router. Это приложение состоит из нескольких страниц, которые разделяют общий шаблон, такие как:

навигационной панели

var app = angular.module('app', ['ngSanitize', 'ngResource', 'ngRoute', 'ui.router']) 
    .config(['$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) => { 
     $urlRouterProvider.otherwise("/index"); 

     $stateProvider 
      .state('index', { 
       url: "/index", 
       views: { 
        'navbar': { 
         templateUrl: 'Views/Partials/navbar.cshtml', 
         controller: 'App.Controllers.NavbarController' 
        }, 
        'content': { 
         templateUrl: 'Views/index.cshtml', 
         controller: 'App.Controllers.IndexController' 
        } 
       } 
      }) 
      .state('settings', { 
       url: "/settings", 
       views: { 
        'navbar': { 
         templateUrl: 'Views/Partials/navbar.cshtml', 
         controller: 'App.Controllers.NavbarController' 
        }, 
        'content': { 
         templateUrl: 'Views/settings.cshtml', 
         controller: 'App.Controllers.SettingsController' 
        } 
       } 
      }); 
    }]); 

Оба '/index' и '/settings' долю того же шаблона 'Views/Partials/navbar.cshtml'. После тестирования я узнал, что каждый раз, когда «страница» загружается для URL-адреса, все просмотры в нем перезагружаются.

Возможно ли избежать перезагрузки навигатора, если он уже был загружен ранее?

Answer 1

Вы должны быть в состоянии извлечь навигатор в родительское состояние существующих состояний. Таким образом, навигационная панель загружается только при вводе родительского состояния, и вы должны иметь возможность изменять дочерние состояния, которые совместно используют этот родительский элемент, не затрагивая его.

Хотя есть и лучше организованные способы сделать это, мой быстрый и грязный способ будет переименовать состояния вы должны withnav.index и withnav.settings. Затем удалите из них навигационное представление и добавьте следующее состояние.

$stateProvider 
    .state('withnav', { 
     abstract: true, 
     views: { 
      'navbar': { 
       templateUrl: 'Views/Partials/navbar.cshtml', 
       controller: 'App.Controllers.NavbarController' 
      } 
     } 
    });