在某些视图上，我需要侧边栏和标题，而在某些视图上，我不需要。使用AngularJS，什么是实现这一目标的最佳方法。
我目前的解决方案是在侧边栏和标题DIV上使用ng-if，并在我的控制器中，根据我希望侧边栏和标题显示的视图，将$ scope变量设置为true或false。
一个具体的例子是Youtube.com。在Youtube的主页上，请注意，有一个侧边栏和一个带有过滤器的子标题：“要看的内容”和“音乐”。但是，在任何视频页面上，边栏和子标题都不存在。我想在AngularJS中实现。
index.html
<html ng-app="demoApp">
<body ng-controller="demoAppMainController">
<header>
<ng-include src="'./partials/mainHeader.html'"></ng-include>
<ng-include ng-if="showSubHeader" src="'./partials/mainSubHeader.html'"></ng-include>
</header>
<main>
<ng-view></ng-view>
</main>
</body>
</html>
DiscussionBoard.html
<div class="discussionBoard" ng-controller="DiscussionBoardController">
<h2>DiscussionBoard</h2>
</div>
controllers.js
var demoAppControllers = angular.module('demoAppControllers', []);
demoAppControllers.controller('demoAppMainController', ['$scope', function($scope) {
$scope.showSubHeader = true;
}]);
opinionLensControllers.controller('DiscussionBoardController', ['$scope', function($scope) {
$scope.showSubHeader = false;
}]);
最佳答案
而不是在controller级别中进行配置，而是在route级别中进行配置。并且将监听$routeChangeSuccess事件并更新$rootScope。
demoAppControllers.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController',
showHeader : true
}).
when('/about', {
templateUrl: 'discuss.html',
controller: 'DiscussionBoardController',
showHeader : false
}).
otherwise({
redirectTo: '/home'
});
}).
run(['$rootScope', function($rootScope) {
$rootScope.$on("$routeChangeSuccess", function(event, next, current) {
$rootScope.showHeader = next.$$route.showHeader;
});
}]);
在模板中，您只能使用
ng-if="showHeader"。我觉得这很容易维护。