响应下拉导航栏有角的UI自举（在正确的角样的方式进行） [英] Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

问题描述

我采用了棱角分明的UI，自举的模块ui.bootstrap.dropdownToggle创建的jsfiddle有一个下拉导航栏： http://jsfiddle.net/mhu23/2pmz5/

I've created a JSFiddle with a dropdown navbar using angular-ui-boostrap's module "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

据我了解，这是正确的，角样的方式来实现这样的下拉菜单。 错误的方式，在angularjs而言，将是包括bootstrap.js，并使用数据切换=下拉菜单...我说得对吗？

As far as I understand this is the proper, angular kind of way to implement such a dropdown menu. The "wrong" way, in terms of angularjs, would be to include bootstrap.js and to use "data-toggle="dropdown"... Am I right here?

现在我想响应行为添加到我的导航栏，如下小提琴完成：
http://jsfiddle.net/ghtC9/6/

Now I'd like to add responsive behaviour to my navbar as done in the following Fiddle: http://jsfiddle.net/ghtC9/6/

但是，有件事情我不喜欢上面的解决方案。这家伙包括bootstrap.js！

BUT, there's something I don't like about the above solution. The guy included bootstrap.js!

那么，什么是正确的角样的方式来响应行为添加到现有的导航栏？

So what would be the correct angular kind of way to add responsive behaviour to my existing navbar?

我显然需要使用白手起家响应导航栏类，如NAV-垮垮导航栏响应崩溃。但我不知道该怎么...

I obviously need to use bootstraps responsive navbar classes such as "nav-collapse collapse navbar-responsive-collapse". But I don't know how...

我真的AP preciate您的帮助！

I'd really appreciate your help!

感谢你在前进！
迈克尔

Thank you in advance! Michael

推荐答案

您可以用崩溃的指令去做：的 http://jsfiddle.net/iscrow/Es4L3/
（请在HTML两个说明）。

You can do it using the "collapse" directive: http://jsfiddle.net/iscrow/Es4L3/ (check the two "Note" in the HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

这就是你需要存储在一个变量的折叠状态，并且改变由（简单）的倒塌也更改该变量的值。

That is, you need to store the collapsed state in a variable, and changing the collapsed also by (simply) changing the value of that variable.

0.14版本增加了一个 UIB - preFIX到组件：

Release 0.14 added a uib- prefix to components:

https://github.com/angular -ui /引导/维基/迁移导向，用户资格prefixes

更改：崩溃到 UIB崩溃

这篇关于响应下拉导航栏有角的UI自举（在正确的角样的方式进行）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！