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 directive。

这已添加very recently。

一个例子：

<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>

我的角带导航栏不会扩展

1 个答案: