Question

昨天我问了一个问题How to do multiple views with Angular to support header and sidebar?，基于这个问题，我能够在为AngularJS App提供标题和侧边栏方面取得一些进展。

我在这里有一个工作小提琴：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。我想知道是否有办法避免这种情况？此外，是否有一种Angular方式可以突出显示哪个侧边栏链接当前处于活动状态？

Answer 1

我建议使用ui-router（What is the difference between angular-route and angular-ui-router?）而不是ngRoute。如果你有兴趣，请留意。然后像这样使用一些ng-switch：

//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

您还可以使用实际的ngRoute并使用在路线上设置的控制器范围变更来更改ngSwitch条件

编辑：

选项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>

等等。

Answer 2

您可以移动侧边栏包括输出并使用变量来确定您想要查看它的路线。看看这个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; }
    }
})

如何在AngularJS中基于侧边栏更新内容

2 个答案: