角UI，引导导航栏折叠和Javascript [英] Angular UI, Bootstrap Navbar Collapse and Javascript

问题描述

我在许多方面与UI的路由器的麻烦。我不明白它是如何与其他框架进行交互。

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

也就是说，我想实现引导3的导航栏衰减模块，如下图所示：

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>

这是直接从引导网站和正常工作时，内部自己的html的网页。

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

问题是，当我将它插入UI的路由器视图。倒塌的动作不再工作 - 我猜是因为数据目标功能在某种程度上无法找到它的目标

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.

一个人如何使用引导3角UI？该角UI引导包不具有导航栏模块。

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

下面的回答是不错的。这里是一个参考网址<一个href=\"http://stackoverflow.com/questions/14741988/twitter-boostrap-navbar-with-angular-js-collapse-not-functioning?rq=1\">Twitter自举导航栏有角JS - 。收起不能正常工作

The answer below is good. Here is a reference URL Twitter Boostrap Navbar with Angular JS - Collapse not functioning.

推荐答案

您应该UI的引导指令替换引导本地JS性能（注意 NG-点击和崩溃）

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;

编辑：

新版本用户界面，引导 preFIX所有compontents 的。调整你的code.因此如。 崩溃 - > UIB崩溃

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

这篇关于角UI，引导导航栏折叠和Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！