logo标签列表

AngularJS如何在某些路由中显示侧边栏，而在其他路由中隐藏？

javascriptangularjs
4

我正在尝试使用ng-if在我的单页应用程序中包含侧边栏，并从其他页面隐藏它。HTML代码如下：

<body ng-app="simpleapp">
        <div id="wrapper">
            <!-- Navigation -->

            <div ng-include="'./include/sidebar.html'"></div>

            <!-- Page Content -->
            <div id="page-wrapper">
                <div class="container-fluid">
                    <div ng-view class="slide-animation"></div>
                </div>
            </div>
        </div>

在上面的例子中，ng-include加载了侧边栏，id page-wrapper用于为侧边栏的容器添加额外的边距，而ng-view是我的视图加载的位置。
我需要做的是在某些页面上，我不想有侧边栏存在，比如（例如登录页面）。
angular.module('exampleApp', ['ngRoute', 'ngResource', 'ngCookies'])
    //Routes 
.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'loginCtrl'
        }).
        when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'homeCtrl'
        }).
        otherwise({
            redirectTo: '/login'
        });
    } ]) 
.controller('mainCtrl',function($rootScope,$window){
    $rootScope.show = true;
    if($window.location.hash == '#/login'){
        $rootScope.show = false;
    } });

我想到的最好的解决方案是在页面主体中添加另一个 ctrl，使用 ng-if 条件语句给 div 添加 id。

<div ng-if="$root.show" ng-include="'./include/sidebar.html'"></div>
            </sidebar>

            <!-- Page Content -->
            <div id="{{$root.show ? 'page-wrapper':''}}">

这个好像一开始可以正常工作，但每当页面改变时，这个条件就不再适用了 :( 所以如果我打开 #/login 页面，我会发现侧边栏不存在，但是一旦我移动到 /home 页面，侧边栏也不会显示。

你能帮忙吗？我已经试着搜索了几个小时，但没有成功。

谢谢

1个回答
7

我没有看到任何东西使用你的mainCtrl，所以我不确定它会如何被使用。我认为你可能需要考虑更像这样的方法：

angular.module('myApp')
  .run(function($rootScope, $location, $routeParams) {
    $rootScope.$on('$routeChangeSuccess', function(event, current) {
      // Look at $location.path()
      // If it isn't what you want, toggle showSideBar...
      $rootScope.showSideBar = true|false;
    }
  }]);

那么你的HTML代码可以像这样引用它：
  <div ng-if="showSideBar" ng-include="'./include/sidebar.html'"></div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接