带有 angular-ui bootstrap 的响应式下拉导航栏(以正确的角度方式完成) [英] Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

问题描述

我使用 angular-ui-boostrap 的模块ui.bootstrap.dropdownToggle"创建了一个带有下拉导航栏的 JSFiddle:http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar-inner"><div class="容器"><a class="brand" href="#">我的响应式导航栏</a><ul class="nav"><li class="divider-vertical"></li>
<a href="#" class="dropdown-toggle">菜单 1 <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#/list">条目 1</a>
<li><a href="#/list">条目 2</a>....

据我所知，这是实现此类下拉菜单的正确、有角度的方式.就 angularjs 而言，错误"的方式是包含 bootstrap.js 并使用data-toggle="dropdown"...我在这里吗?

现在我想向我的导航栏添加响应行为，如下面的 Fiddle 所示:http://jsfiddle.net/ghtC9/6/

但是，我不喜欢上述解决方案.这家伙包括 bootstrap.js！

那么，向我现有的导航栏添加响应行为的正确角度方式是什么?

我显然需要使用引导响应式导航栏类，例如nav-collapse collapse navbar-responsive-collapse".但我不知道怎么...

非常感谢您的帮助！

先谢谢你！迈克尔

解决方案

您可以使用折叠"指令来实现:http://jsfiddle.net/iscrow/Es4L3/(检查 HTML 中的两个注释").

 <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><!-- 注意:这里使用折叠".不再需要原始的数据-"设置.--><div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse"><ul class="nav">

也就是说，您需要将折叠状态存储在一个变量中，并通过(简单地)更改该变量的值来更改折叠状态.

<小时>

0.14 版为组件添加了 uib- 前缀:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

更改:collapse 为 uib-collapse.

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>

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?

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

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?

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

I'd really appreciate your help!

Thank you in advance! Michael

解决方案

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.

---

Release 0.14 added a uib- prefix to components:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Change: collapse to uib-collapse.

这篇关于带有 angular-ui bootstrap 的响应式下拉导航栏(以正确的角度方式完成)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！