3

Angularjs と Bootstrap 2.3.2 を使用して、サブメニューを含むメニュー システムを作成しています。これは、幅の狭いデバイスでレスポンシブ デザインを使用していて、折りたたまれたバージョンのメニュー システムに問題が発生するまではうまく機能します。具体的には、メニュー項目の 1 つを選択した後、メニューが折りたたまれません。興味深いことに、メイン メニューが折りたたまれていなくても、サブ メニューは折りたたまれます。アイコンバーをクリックするとメニューを折りたたむことができますが、メニュー項目自体はこれを行いません。

$resource を介してメニュー (ユーザー固有) を取得し、次のテンプレートによって作成されます。

<div class="navbar navbar-inverse navbar-fixed-top hidden-print">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">BRAND HERE</a>
            <div ng-controller="MenuController" class="nav-collapse collapse">
                <div ng-repeat="menu in menus">
                <ul  class="nav" role="navigation">
                    <li ng-show="menu.submenus" class="dropdown" class="active">
                        <a class="dropdown-toggle" href="{{menu.route}}">{{menu.title}}<i class="icon-caret-down"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li ng-repeat="submenu in menu.submenus"><a href="{{submenu.route}}">{{submenu.title}}</a></li>
                        </ul>
                    </li>
                    <li ng-hide="menu.submenus"><a href="{{menu.route}}">{{menu.title}}</a></li>
                </ul>
                </div>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/ container -->
    </div>
</div>
<!--/ navbar -->

メニュー オブジェクトは次のようになります。

[
    {
        "title": "Setup",
        "route": "#",
        "submenus": [
            {
                "title": "one",
                "route": "#/one",
                "submenus": null
            },
            {
                "title": "two",
                "route": "#/two",
                "submenus": null
            }        ]
    },
    {
        "title": "special",
        "route": "#/special",
        "submenus": null
    },
    {
        "title": "boring",
        "route": "#/boring",
        "submenus": null
    }
]
4

1 に答える 1

1

わかりました、私はこれを理解したと思います。この質問の回答のおかげでインスピレーション:

AngularJS を使用した Twitter Bootstrap Navbar - 折りたたみが機能しない

ブートストラップ JavaScript の使用から「Angular」スタイルに変換しました。具体的には、テンプレートは次のようになります。

<div class="navbar navbar-inverse navbar-fixed-top hidden-print">
    <div class="navbar-inner">
        <div class="container">
            <div ng-controller="MenuController" >
            <button type="button" class="btn btn-navbar" ng-init="isCollapsed=true" ng-click="isCollapsed = !isCollapsed" >
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">BRAND HERE</a>
            <div  class="nav-collapse" collapse="isCollapsed">
                <div ng-repeat="menu in menus">
                <ul class="nav" role="navigation">
                    <li ng-show="menu.submenus" class="dropdown" class="active">
                        <a class="dropdown-toggle" href="{{menu.route}}">{{menu.title}}<i class="icon-caret-down"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li ng-repeat="submenu in menu.submenus"><a ng-click="doCollapse()" href="{{submenu.route}}">{{submenu.title}}</a></li>
                        </ul>
                    </li>
                    <li ng-hide="menu.submenus"><a ng-click="doCollapse()" href="{{menu.route}}">{{menu.title}}</a></li>
                </ul>
                </div>
            </div>
            </div>
            <div class="navbar-text pull-right" id="logout" ng:controller="LogoutController">
                <span id="loggedinGreeting" ng-show="isLoggedIn()">Hello {{curUser.getCurUser().username}} &nbsp; &nbsp; <a href="" ng-click="logout()" >logout</a> </span>
                <span id="loginlink" ng-hide="isLoggedIn()"><a href="" ng-click="gotoLogin()" >login</a>&nbsp; &nbsp;<a id="signuplink" href="/signup.htm" >signup</a></span>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/ container -->
    </div>
</div>

data-toggle および data-target 属性を削除し、折りたたみを強制するコントローラー ベースのメソッドを指す ng-click ディレクティブに置き換えました。MenuController への JavaScript の追加は次のとおりです。

$scope.doCollapse = function() {
       $scope.isCollapsed=true;
}

解決策は非常に明白であるため、機能しているようです。ブートストラップの方法でそれを行うことに頭をぶつけ続けたと思います。doCollapse 関数のアクションを ng-click 自体に移動することで、これをさらに簡素化できると思いますが、そのままで満足しています。

于 2013-10-19T15:24:01.017 に答える