Question

我正在尝试使用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和condition将id添加到div。

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

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

这工作得很好..但是当页面发生变化时......这个条件没有重新应用:(所以如果我打开＃/ login我可以看到没有侧边栏，但是一旦我移动到/home边栏就不了显示。

你可以帮忙吗？我试着搜索几个小时没有成功。

感谢

Answer 1

我没有看到任何使用您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>

angularjs在某些路线上显示侧边栏并隐藏在其他路线中

1 个答案: