AngularJS 如何根据侧边栏更新内容

Question

我昨天问了一个问题，基于这个问题，我在 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() {

}

这似乎可行，但是，我想知道是否有办法避免在边栏中的每个 link 上包含 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>

所以我在边栏的每个 link 上都包含了 sidebar.html。我想知道是否有办法避免这种情况？另外，是否有一种 Angular 方法来突出显示哪个边栏 link 当前处于活动状态？

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 更改为 /sidebar1 和 /sidebar2

上的父模板 sidebarlinkparent.html

此外，您还可以使用实际的 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 如何根据侧边栏更新内容

How to update content based on sidebar in AngularJS

html

javascript

angularjs

ng-view