Angular UI、Bootstrap Navbar Collapse 和 Javascript [英] Angular UI, Bootstrap Navbar Collapse and Javascript

问题描述

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

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

<div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">项目名称测试</a>
<div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系方式</a></li></div><!--/.nav-collapse -->

这直接来自 Bootstrap 网站，在它自己的 .html 页面中运行良好.

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

如何将 Bootstrap 3 与 Angular UI 一起使用?Angular UI Bootstrap 包没有导航栏模块.

下面的答案很好.这是一个参考 URL Twitter Bootstrap Navbar with AngularJS- 折叠不起作用.

解决方案

你应该用 ui-bootstrap 指令替换 bootstrap 原生 js 属性(注意 ng-click 和 collapse):

<!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><!-- 您的品牌在这里--></a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" collapse="navbarCollapsed"><!-- 此处是您正常的可折叠内容-->

</nav>

在控制器中设置初始值:

$scope.navbarCollapsed = true;

新版本的 ui-bootstrap 为所有组件添加前缀.相应地调整您的代码，例如.collapse -> uib-collapse.

I have trouble with UI-Router in many ways. I don't understand how it interacts with other frameworks.

Namely, I am trying to implement Bootstrap 3's navbar collapse module, seen below:

<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>

This is straight from the Bootstrap website and it works fine when inside its own .html page.

The issue is when I insert it into a UI-Router view. The collapsing action no longer works -- I'm guessing because the "data-target" function is somehow unable to find its target.

How does one use Bootstrap 3 with Angular UI? The Angular UI Bootstrap package does not have a navbar module.

The answer below is good. Here is a reference URL Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning.

解决方案

You should replace bootstrap native js properties with ui-bootstrap directives (note the ng-click and 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>

Set the initial value in your controller:

$scope.navbarCollapsed = true;

Edit:

New versions of ui-bootstrap prefix all compontents. Adjust your code accordingly eg. collapse -> uib-collapse.

这篇关于Angular UI、Bootstrap Navbar Collapse 和 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！