被重新加載

Question

停止公共模板我有一個角度應用程序依賴角UI的路由器上。此應用程序共享一個通用模板，如導航欄多個頁面：

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