我的角带导航栏不会扩展

Question

我angular-strap用来创建一个导航栏.它会像它应该的那样折叠成汉堡包图标,但是当它折叠时(汉堡包图标)它不会展开以点击链接.这是我的代码:

  <nav class="navbar navbar-default" role="navigation" bs-navbar>
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

该navbar像预期的响应.此外,directive正在实例化,因为link函数中的断点被击中.如上所述当navbar它hamburger处于状态时,它不会扩展以使其能够点击任何链接.我需要做些什么才能使其成功angular-strap？如何使hamburger图标展开？

Answer 1

您可以使用ng-strap 2.1.3 中的collapse指令.

这是最近添加的.

一个例子:

<nav class="navbar navbar-default" bs-collapse>
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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" ng-bind="config.options.page.pageName" ui-sref="root">Doks</a>
        </div>
        <div bs-collapse-target>
            <ul class="nav navbar-nav">
                <li ng-repeat="category in categories" class="item" ng-class="{active: urlParams.category === category}">
                    <a ui-sref="hasCategory({category: category})">{{category}}</a>
                </li>
            </ul>
        </div>
    </div>
</nav>