AngularJS 响应式导航菜单在 ng-view 中隐藏内容答案

【问题标题】：AngularJS Responsive Navigtaion Menu is Hiding Content in ng-viewAngularJS 响应式导航菜单在 ng-view 中隐藏内容
【发布时间】：2026-02-03 22:05:01
【问题描述】：

这是我在 index.html 中的主要视图：

<body>
    <div id="container">
        <header ng-controller="NavController" >
            <nav id="topNavBar" class="topNav" ng-class="{'responsive' : toggle}">
                <a href="#/" ng-click="toggle = false" ng-class="{active: isActive('')}">Home</a>
                <a href="#/about" ng-click="toggle = false" ng-class="{active: isActive('about')}">About</a>
                <a href="#/gallery" ng-click="toggle = false" ng-class="{active: isActive('gallery')}">Gallery</a>
                <a href="#/contact" ng-click="toggle = false" ng-class="{active: isActive('contact')}">Contact</a>
                <a href="#" id="menuIcon" ng-click="toggle = !toggle">
                    <i class="fa fa-bars"></i>
                </a>
            </nav>
        </header>
        <div ng-view></div>
    </div>
    <script src="js/app.js"></script>
</body>

这是我的导航菜单 CSS：

.topNav {
  overflow: hidden;
  background-color: #333;
}

.topNav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topNav a:hover {
  background-color: #ddd;
  color: black;
}

.topNav a.active {
  background-color: #4CAF50;
  color: white;
}

.topNav #menuIcon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topNav a:not(:first-child) {display: none;}
  .topNav a#menuIcon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topNav.responsive {position: relative;}
  .topNav.responsive #menuIcon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topNav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

这里是 app.js：

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })

  .when('/about', {
    templateUrl : 'pages/about.html',
    controller  : 'AboutController'
  })

  .when('/gallery', {
    templateUrl : 'pages/gallery.html',
    controller  : 'GalleryController'
  })

  .when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'ContactController'
  })

  .otherwise({redirectTo: '/'});
});

app.controller('NavController', function($scope, $location) { 
    $scope.isActive = function(page) {
        return $location.path().substring(1) == page;
    }

    $scope.toggle = false;
});

app.controller('HomeController', function($scope, $http) {
    // Code for HomeController
});

app.controller('AboutController', function($scope) {
  // Code for AboutController
});

app.controller('GalleryController', function($scope, $http) {
    // Code for GalleryController
});

app.controller('ContactController', function($scope) {
    // Code for ContactController
});

当屏幕尺寸小于 600 像素宽时，我的导航菜单会折叠并显示一个菜单按钮。当单击菜单按钮时，我有一些工作的 jQuery 会触发下拉菜单：

$("#menuIcon").on('click', function() {
    $("#topNavBar").toggleClass('responsive');
});

我的 Angular 版本的行为如下：

单击菜单按钮时，出现下拉菜单（好），但ng-view中的所有内容都消失了（坏）
当您再次单击菜单按钮时，下拉菜单会折叠（很好）
当您执行 #1 然后单击菜单中的链接时，相应的页面会正确加载并且下拉菜单会折叠（很好）

我该如何解决这个问题？

更新：已解决

从 AngularJS 1.4 切换到最新版本 1.7.5（不知道我为什么使用 1.4....）
将导航链接更新为 href="#!/..." 而不是 href="#/..."
从下拉菜单按钮中删除了 href="#"（这可能是我的问题的根本原因）

【问题讨论】：

标签： angularjs

【解决方案1】：

我遇到了同样的问题，这帮助我解决了问题！

我从https://github.com/googlearchive/angularfire-seed/blob/master/app/index.html 复制了我的标记，并从我在某处找到的引导示例复制了导航栏下拉菜单：

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown" ng-show="isLoggedIn">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            {{ user.name }}<b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="" ng-click="changePassword()">Change Password</a></li>
            <li><a href="" ng-click="logout()">Logout</a></li>
          </ul>
        </li>
      </ul>
      ...
    </div>

问题是当用户点击下拉菜单时，它注册为点击<a>元素并将URL更改为/#，这改变了主要内容块中出现的内容。

从<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 中删除href="#" 为我解决了这个问题，所以现在当用户单击下拉菜单时，URL 不会改变（因此主要内容不会从<div ng-view> 块中消失）！

      <a class="dropdown-toggle" data-toggle="dropdown">

【讨论】：