3

我正在使用 Angularjs 和 Bootstrap 2.3.2 创建带有子菜单的菜单系统。这很有效，直到我在窄设备上使用响应式设计并且菜单系统的折叠版本出现问题。具体来说，选择菜单项之一后菜单不会折叠。有趣的是，即使主菜单没有，SUB 菜单也会崩溃。如果您单击图标栏，菜单可以折叠，但菜单项本身不会这样做。

我通过 $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 导航栏 - 折叠不起作用

我从使用引导 javascript 转换为“角度”样式。具体来说，模板变为：

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