Как обновить контент на основе боковой панели в AngularJS

Question

Я задал вопрос вчера How to do multiple views with Angular to support header and sidebar?, и по этому вопросу я смог добиться определенного прогресса в создании заголовка и боковой панели для моего приложения AngularJS.

У меня есть рабочая скрипка здесь: http://jsfiddle.net/mcVfK/929/

JS выглядит следующим образом:

angular.module('app', ['ngRoute']) 
    .config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
    when('/header1', { 
     templateUrl: 'header1.html', 
     controller: DashboardCtrl 
    }) 
    .when('/header2', { 
     templateUrl: 'header2.html', 
     controller: DashboardCtrl 
    }) 
    .when('/dashboard',{ 
     templateUrl: 'dashboard.html', 
     controller: DashboardCtrl 
    }) 
    .when('/sidebar1',{ 
     templateUrl: 'sidebarlink1.html', 
     controller: DashboardCtrl 
    }) 
    .when('/sidebar2',{ 
     templateUrl: 'sidebarlink2.html', 
     controller: DashboardCtrl 
    }) 
    .otherwise({ 
     redirectTo: '/header1' 
    }); 
}]); 

function DashboardCtrl() { 

} 

Это похоже на работу, однако, я хочу, чтобы выяснить, есть ли способ избежать в том числе sidebar.html на каждую ссылку на боковой панели?

Если вы заметили на скрипке, я это делаю:

<script type="text/ng-template" id="sidebarlink1.html"> 
    <div ng-include="'sidebar.html'" id="sidebar"></div> 
    sidebar link 1 content - including sidebar 
</script> 
<script type="text/ng-template" id="sidebarlink2.html"> 
    <div ng-include="'sidebar.html'" id="sidebar"></div> 
    sidebar link 2 content - including sidebar 
</script> 

Так я в том числе sidebar.html по каждой ссылке на боковой панели. Мне интересно, есть ли способ избежать этого? Кроме того, есть ли Угловой способ указать, какая боковая ссылка сейчас активна?

Answer 1

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

http://jsfiddle.net/mcVfK/931/

angular.module('app', ['ngRoute']) 
    .config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
    when('/header1', { 
     templateUrl: 'header1.html', 
     controller: DashboardCtrl, 
    resolve: { 
     hasSidebar: function($rootScope) { 
      $rootScope.hasSidebar = false; 
      return false; } 
    } 
}) 

Answer 2

Я рекомендую использовать ui-router (What is the difference between angular-route and angular-ui-router?) вместо ngRoute. Лир об этом, если вы заинтересованы. А затем использовать некоторые нг-переключатель, как это:

//Parent template 
<script type="text/ng-template" id="sidebarlinkparent.html"> 
    <div ng-include="'sidebar.html'" id="sidebar"></div> 
    <div ng-switch="$state.current.name"> 
     <div ng-switch-when="sidebar1" ng-include="'sidebarlink1.html'"></div> 
     <div ng-switch-when="sidebar2" ng-include="'sidebarlink2.html'"></div> 
    </div> 
</script> 

//template sidebar 1 
<script type="text/ng-template" id="sidebarlink1.html"> 
    sidebar link 1 content - including sidebar 
</script> 

//template sidebar 2 
<script type="text/ng-template" id="sidebarlink2.html"> 
    sidebar link 2 content - including sidebar 
</script> 

Затем измените templateUrl в маршрутной конфигурации, чтобы перейти в родительский шаблон sidebarlinkparent.html на /sidebar1 и /sidebar2

Aswell вы можете использовать фактический ngRoute и изменить ngSwitch состояние с областью управления варом выставиться на маршруты или что-то подобное

EDIT:

Вариант 2:

//Parent template 
<script type="text/ng-template" id="sidebarlinkparent.html"> 
    <div ng-include="'sidebar.html'" id="sidebar"></div> 
    <div ng-include="$state.current.name +'.html'"></div> 
</script> 

ВАРИАНТ 3:

//Parent template 
<script type="text/ng-template" id="sidebarlinkparent.html"> 
    <div ng-include="'sidebar.html'" id="sidebar"></div> 
    <div ng-include="$state.params.include +'.html'"></div> 
</script> 

и т.д. и т.п ..