Angular UI、Bootstrap 导航栏折叠和 Javascript

Posted 2023-02-19

【中文标题】Angular UI、Bootstrap 导航栏折叠和 Javascript

【英文标题】：Angular UI, Bootstrap Navbar Collapse and Javascript

【发布时间】：2014-07-13 02:59:54

【问题描述】：

我在很多方面都遇到了 UI-Router 的问题。我不明白它是如何与其他框架交互的。

也就是说，我正在尝试实现 Bootstrap 3 的导航栏折叠模块，如下所示：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Project name test</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

这直接来自 Bootstrap 网站，在它自己的 .html 页面中可以正常工作。

问题是当我将它插入 UI-Router 视图时。折叠动作不再起作用——我猜是因为“数据目标”函数不知何故无法找到它的目标。

如何使用带有 Angular UI 的 Bootstrap 3？ Angular UI Bootstrap 包没有导航栏模块。

下面的答案很好。这是一个参考网址Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning。

【参考方案1】：

您应该用 ui-bootstrap 指令替换引导原生 js 属性（注意 ng-click 和 collapse）：

<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-click="navbarCollapsed = !navbarCollapsed">
        <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="#">
        <!-- your branding here -->
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" collapse="navbarCollapsed">
      <!-- your normal collapsable content here -->
    </div>
</nav>

在你的控制器中设置初始值：

$scope.navbarCollapsed = true;

编辑：

新版本的 ui-bootstrap prefix all compontents。相应地调整您的代码，例如。 collapse -> uib-collapse.

【讨论】：

其实ui-router跟这个没有关系。如果您还没有，则需要在项目中包含 ui-bootstrap。您确实根本不需要来自原始 twitter bootstrap 发行版的任何 js 文件 - 它们可以被 ui-bootstrap 中的纯角度指令替换。

在元素上设置 navbarCollapsed 可能比在控制器中更具可读性。您可以将 ... ng-init="navbarCollapsed=true" ... 添加到折叠 。

另外，将ng-click="navbarCollapsed = !navbarCollapsed" 添加到<div class="collapse...> 内的链接将在做出选择时自动关闭菜单。

@GrantLindsay 我无法通过 ng-click 触发我的 bootstrap-ui 导航栏中的任何链接。我正在使用 ui-sref，这可能是为什么？你可以看到我的代码在oscil.io

运行

使用最新版本的 ui-boostrap (1.1.1) 您需要使用 'uib-collapse' 而不是 'collapse'。 <div class="collapse navbar-collapse" id="navbar-ex-collapse" uib-collapse="navbarCollapsed"> 见ui-bootstap docs。

【参考方案2】：

我的特定问题围绕范围展开。我正在使用ng-repeat 循环浏览我的菜单项，因此navbarCollapsed 在ng-repeat 子范围内无法访问。

解决方法是访问父作用域的变量。简单如：

ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"

希望这对遇到同样问题的人有所帮助。