AngularJs中的引导导航栏

我正在尝试使用本教程来实现

导航条形码

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
              </li>
          </ul>
          <ul class="nav navbar-nav navbar-right" ng-controller="LoginController">
              <li><a href="#/register">Register</a></li>
              <li><a href="#/">Login</a></li>
          </ul>
      </div>
    </div>
</nav>

问题是：它不能在移动设备上工作。它显示为我请求的桌面视图。我正在修整以查看切换导航栏

我的网页网址：

---

我遗漏了什么吗？

可能是您为angular ui boostrap提供了错误的npm包吗？我的导航组件基本相同，可以正常工作。唯一的区别是，在你的package.json中，你列出了“角度引导”，而我的是

"dependencies": {
  "angular": "^1.6.1",
  "angular-animate": "^1.6.1",
  "angular-route": "^1.6.1",
  "angular-ui-bootstrap": "^2.4.0",
  "express": "^4.14.0",
  "greenlock-express": "^2.0.8",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
},

---

注意，我使用的是angular ui bootstrap而不是angular bootstrap

可能是您为angular ui bootstrap提供了错误的npm包吗？我的导航组件基本相同，可以正常工作。唯一的区别是，在你的package.json中，你列出了“角度引导”，而我的是

"dependencies": {
  "angular": "^1.6.1",
  "angular-animate": "^1.6.1",
  "angular-route": "^1.6.1",
  "angular-ui-bootstrap": "^2.4.0",
  "express": "^4.14.0",
  "greenlock-express": "^2.0.8",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
},

---

注意，我使用的是angular ui引导，而不是angular引导首先，有一个最小的工作示例会很有帮助。你需要猜测你是否正确地包含了angular、bootstrap和ui引导

我使用您在依赖项中提到的相同角度、ui引导和引导版本对其进行了测试

如果您以一种巧妙的方式取消注释某些标记，您的代码甚至可以工作

包装未排序列表的div容器会把事情搞砸。当使用Firebug时，您可以看到汉堡包菜单正在工作，但您的ui项只是没有显示出来

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <!-- comment out the div block, this messes things up -->
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
    <!-- I excluded the controller for testing purposes -->
    <!-- ng-controller="LoginController"> -->
          <li><a href="#/register">Register</a></li>
          <li><a href="#/">Login</a></li>
      </ul>
     <!-- exclude this here -->
     <!--</div>-->
</div>

切换导航

---

首先，有一个最简单的工作示例会很有帮助。你需要猜测你是否正确地包含了angular、bootstrap和ui引导

我使用您在依赖项中提到的相同角度、ui引导和引导版本对其进行了测试

如果您以一种巧妙的方式取消注释某些标记，您的代码甚至可以工作

包装未排序列表的div容器会把事情搞砸。当使用Firebug时，您可以看到汉堡包菜单正在工作，但您的ui项只是没有显示出来

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <!-- comment out the div block, this messes things up -->
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
    <!-- I excluded the controller for testing purposes -->
    <!-- ng-controller="LoginController"> -->
          <li><a href="#/register">Register</a></li>
          <li><a href="#/">Login</a></li>
      </ul>
     <!-- exclude this here -->
     <!--</div>-->
</div>

切换导航

---

我不使用bower，但在搜索他们的包时，我看到有两个不同的回购协议指向相同的包…让我再次查看您的代码…查看您的navcontroller，我看不到任何地方。我是遗漏了还是在其他地方声明了？查看Michael的回答我不使用bower，但搜索他们的包我看到有两个不同的回购协议指向相同的包…让我再次查看您的代码…查看您的导航控制器我在任何地方都看不到。我是遗漏了还是在其他地方声明了？看看Michael的回答这应该可以纠正它，对我也适用。真不敢相信我看不到，但您已经添加了两次class=“navbar-navbar-collpase”。“不处理Anrdoid”。。。你用的是什么浏览器？工作与否在很大程度上取决于设备浏览器的渲染引擎。请尝试清除缓存。网站没有以响应模式显示，您处于桌面模式。说真的，这是一个不同的问题，请看这里，或者这应该可以纠正它，对我也适用。真不敢相信我看不到，但您已经添加了两次class=“navbar-navbar-collpase”。“不处理Anrdoid”。。。你用的是什么浏览器？工作与否在很大程度上取决于设备浏览器的渲染引擎。请尝试清除缓存。网站未以响应模式显示，您处于桌面模式。说真的，这是另一个问题，请查看此处或