有条件地在 Angular App 中包含侧边栏和标题答案

【问题标题】：Conditionally include sidebar and header in Angular App有条件地在 Angular App 中包含侧边栏和标题
【发布时间】：2015-06-26 16:47:30
【问题描述】：

在某些视图中，我需要侧边栏和标题，而有些则不需要。使用 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;
    }]);

【问题讨论】：

你尝试过什么？发布您所做的一切，我们在这里为您提供帮助，
我添加了我的代码。我的第一个想法是将 ng-if="showSubHeader" 添加到 ng-include 指令中，并在 DiscussionBoardController 中设置 $scope.showSubHeader = false

标签： angularjs angularjs-ng-include angular-ng-if

【解决方案1】：

我不会在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"。我觉得它很容易维护。

【讨论】：

这会引发 $injector:unpr 错误。我包括了 $ngRoute：var demoApp = angular.module('demoApp', ['ngRoute', 'demoAppControllers']);
表示注入依赖有错误。确保包含所有必要的依赖项
$rootScope.showHeader 未定义。 Angular 不能将 showHeaer 识别为 routesProvider 对象中的键。
酷。希望这是因为角度版本的差异。但很高兴它对你有用:)
感谢您的解决方案。你节省了我很多时间。

【解决方案2】：

ng-if="showHeader == true" 像这样使用

 <ng-include ng-if="showHeader == true" src="'./partials/mainSubHeader.html'"></ng-include>

【讨论】：

这不是必需的。 ng-if 将评估表达式的真实值。所以不需要明确地这样做
啊哈谢谢！！ @mohamedrias