1. ホーム
  2. angularjs

angular-ui bootstrapによるレスポンシブ・ドロップダウン・ナビゲーションバー(正しいangularの種類で行われたもの)

2023-09-08 01:11:23

質問

angular-ui-boostrapのモジュール "ui.bootstrap.dropdownToggle" を使ってドロップダウンのナビバーを持つJSFiddleを作成したのですが、どうすればよいでしょうか? 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を含み、"data-toggle="dropdown"を使用することです...。私はここで正しいですか?

さて、次のFiddleで行うように、ナビバーにレスポンシブな動作を追加したいと思います。 http://jsfiddle.net/ghtC9/6/

しかし、上記の解決策で気に入らないことがあります。この人はbootstrap.jsを含んでいるのです!

では、私の既存のナビバーにレスポンシブな動作を追加するための正しいアンギュラー的な方法は何でしょう?

私は明らかに、"nav-collapse collapse navbar-responsive-collapse" などのブートストラップのレスポンシブなナビバークラスを使用する必要があります。しかし、方法がわかりません...。

私は本当にあなたの助けを感謝します!

よろしくお願いします。 マイケル

どのように解決するのですか?

ディレクティブの "collapse" を使用することで可能です。 http://jsfiddle.net/iscrow/Es4L3/ (HTMLの2つの"Note"をチェックしてください).

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

つまり、折りたたんだ状態を変数に格納し、その変数の値を(単純に)変更することで折りたたんだ状態も変更する必要があります。


リリース0.14では uib- のプレフィックスを追加しました。

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

変更する collapse から uib-collapse .