如何在AngularStrap中组合导航栏，下拉列表和折​​叠

Question

我有一个非常典型的场景：

• AngularJS（目前1.2，想尽快升级到1.3 / 1.4）
• Bootstrap 3.x
• AngularStrap 2.1.x

作为顶级菜单，我放置了一个带有下拉菜单的导航栏，我希望它可以折叠为较小的设备（平板电脑肖像，手机）。

<div class="navbar navbar-inverse navbar-fixed-top"
     ng-controller="MenuCtrl" bs-navbar>
    <div class="container-fluid" bs-collapse start-collapsed="true">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    bs-collapse-toggle>
                <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="#">ACME</a>
        </div>

        <div class="navbar-collapse collapse" bs-collapse-target>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/">Home</a></li>
                <li class="dropdown" bs-dropdown>
                    <a href="#" class="dropdown-toggle"
                       data-toggle="dropdown"
                       id="tst-dropdown-session">
                       Session <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#/login">Login</a></li>
                        <li><a href="/api/auth/logout">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

（当然上面的代码与我的真实代码相比有所减少）

问题是：当点击顶部菜单项时，只显示一个小的下拉列表（~10px高度）而没有子菜单项。

有没有人有这方面的工作示例？

我可以管理控制器模型中的菜单项，但是＆＃34;崩溃＆＃34;工作呢？有什么想法吗？

修改（添加图片）

在狭窄的设备上，它不应该是这样的：

但它应该更像这样：

Answer 1

在控制器中定义菜单项。
并使用你的html模板如下

HTML代码

<li><a href="#/">Home</a></li>
<li class="dropdown" bs-dropdown="dropdownHtml">
    <a href="#" class="dropdown-toggle"
       id="tst-dropdown-session">
       Session <b class="caret"></b>
    </a>
</li>

控制器代码

$scope.dropdownHtml = [
    {
        text: "Login",
        href: '#/login',
        title: 'Log out'
    },
    {
        text: "Logout",
        href: '/api/auth/logout',
        title: 'Log out'
    }
];