2

特定のビューでは、サイドバーとヘッダーが必要ですが、不要なビューもあります。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>

ディスカッションボード.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;
    }]);
4

2 に答える 2

7

レベルで行う代わりに、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". 簡単にメンテナンスできると思います。

于 2015-04-20T05:31:43.533 に答える
1

ng-if="showHeader == true" このように使用します

 <ng-include ng-if="showHeader == true" src="'./partials/mainSubHeader.html'"></ng-include>
于 2015-04-20T05:33:58.500 に答える