Question

这是我在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
});

当屏幕尺寸小于600px宽时，我的导航菜单会折叠并显示一个菜单按钮。单击菜单按钮时，我使用了一些能触发下拉菜单的jQuery：

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

我的Angular版本的行为如下：

单击菜单按钮时，会显示下拉菜单（好），但是ng-view中的所有内容都消失（不好）
再次单击菜单按钮时，下拉菜单会折叠（好）
执行＃1后，单击菜单中的链接，将正确加载相应的页面，并且下拉菜单折叠（好）

我该如何解决？

更新：已解决

从AngularJS 1.4切换到最新版本1.7.5（不确定为什么我使用1.4 ....）
将导航链接更新为href =“＃！/ ...”，而不是href =“＃/ ...”
从下拉菜单按钮中删除了href =“＃”（这可能是导致我出现问题的根本原因）

Answer 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更改为/#，从而更改了显示在主内容块中的内容。 / p>

从href="#"中删除<a href="#" class="dropdown-toggle" data-toggle="dropdown">可以解决我的问题，因此，当URL更改时，URL不会更改（因此主要内容也不会从<div ng-view>块中消失）。用户点击下拉菜单！

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

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

1 个答案: