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

昨天我问了一个问题，基于这个问题，我在AngularJS应用程序的标题和边栏方面取得了一些进展

我这里有一把小提琴：

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() {

}

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

这似乎是可行的，但是，我想知道是否有办法避免在侧边栏的每个链接上都包含

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>

边栏链接1内容-包括边栏
侧边栏链接2内容-包括侧边栏

---

因此，我在侧边栏中的每个链接上都包含了

sidebar.html

。我想知道是否有办法避免这种情况？另外，是否有一种角度的方式来突出显示当前处于活动状态的边栏链接？

我建议使用ui路由器（）而不是ngRoute。如果你感兴趣，就去了解一下。然后使用如下的ng开关：

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() {

}

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

备选案文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>

//父模板

---

等等等等。

您可以将侧边栏“包含”移出，并使用一个变量来确定要查看它的路线。查看这个JSFIDLE：

---

添加包含模板的根布局文件。这是我在AngularJS的第二天。我不知道那是什么意思。我去查一下。如果可能的话，如果你能编辑小提琴来告诉我你的意思，那就太好了。理想情况下，你不会像这样使用$rootScope，但因为你还没有连接angularjs控制器，我这样做只是为了说明你可以在routeProvider上设置一个分辨率，并在控制器/视图上使用该值。