javascript - 如何在 AngularJS 中根据侧边栏更新内容

Question

我昨天问了一个问题How to do multiple views with Angular to support header and sidebar?基于这个问题，我在为我的 AngularJS 应用程序设置页眉和侧边栏方面取得了一些进展。

我这里有一个可用的 fiddle :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？

如果你注意到 fiddle ，我正在这样做:

<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。我想知道是否有办法避免这种情况？此外，是否有一种 Angular 方法可以突出显示当前处于事件状态的侧边栏链接？

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