如何根据AngularJS中的侧边栏更新内容
我昨天问了一个问题如何用Angular做多个视图来支持页眉和侧边栏？ 并基于这个问题，我能够为我的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 。 我想知道是否有办法避免这种情况？ 此外，有没有一种方法可以突出显示哪个侧边栏链接当前处于活动状态？
您可以移动侧边栏包含，并使用变量来确定您想要看到它的路线。 看看这个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; }
}
})
我推荐使用ui-router（angular-route和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上的父模板sidebarlinkparent.html执行
您也可以使用您的实际ngRoute并使用在路由上设置的控制器作用域var来更改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>
等等。
链接地址: http://www.djcxy.com/p/77975.html