带有子菜单链接的引导 angulsrjs 不起作用答案

【问题标题】：Bootstrap angulsrjs with submenu link not working带有子菜单链接的引导 angulsrjs 不起作用
【发布时间】：2016-06-10 02:19:43
【问题描述】：

我从 json 文件生成一个菜单，一切正常，但是当我点击它们时，没有子菜单的链接不起作用。

如果我从 li 中删除 dropdown 则主链接有效，但下拉菜单无效

感谢您的关注:)。

演示： JS Bin demo

HTML：

<div ng-controller="nav">
                <ul class="nav navbar-nav">
                    <li ng-repeat="m in menu" ng-class="{ active: isActive(m.url), 'dropdown' : m.submenu}" dropdown>
                        <a href="{{m.url}}" ng-class="{active: isActive(m.url), 'dropdown-toggle' : m.submenu}" dropdown-toggle>{{m.title}} <b class="caret" ng-if="m.submenu"></b>
                        </a>
                        <ul ng-if="m.submenu" class="dropdown-menu">
                            <li ng-repeat="sm in m.submenu" ng-class="{'dropdown-header': sm.header, 'divider': sm.divider}">
                                {{sm.divider}}
                                <b ng-if="sm.header">{{sm.header}}</b>
                                <a href="{{sm.url}}" ng-if="sm.url && sm.title">{{sm.title}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

角度：

app.controller('nav', function ($scope, $location) {
    $scope.menu = [
        {
            "title": "Dashboard", <-- dont work
            "url": "#/dashboard"
    },
        {
            "title": "HRM",
            "submenu": [
                {
                    "title": "Employees",
                    "url": "#/employee"
        },
                {
                    "title": "Holiday",
                    "url": "#/holidays"
        },
                {
                    "divider": "true"
        },
                {
                    "header": "Header 2"
        },
                {
                    "title": "Again...a link.",
                    "url": "errrr"
        }
      ]
    },
        {
            "title": "Attandance", <-- dont work
            "url": "#/attandance"
    },
        {
            "title": "Reports",
            "submenu": [
                {
                    "title": "Some Link",
                    "url": "some/place"
        },
                {
                    "title": "Another Link",
                    "url": "some/other/place"
        },
                {
                    "divider": "true"
        },
                {
                    "header": "Header 2"
        },
                {
                    "title": "Again...a link.",
                    "url": "errrr"
        }
      ]
    }
  ];

    $scope.isActive = function (ui) {
        var loc = ui;
        if (loc) {
            loc = loc.replace("/#", "").replace("#", "");

            if ($location.path().indexOf(loc) != -1) {
                console.log(ui);
                return true;
            }
        }
    };

});

【问题讨论】：

标签： angularjs twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

我尝试过使用“ng-repeat-start”分离项目，无论是否有下拉菜单

<ul class="nav navbar-nav">
    <span ng-repeat-start="m in menu" ></span>
    <li  ng-if="m.submenu !== undefined" dropdown>
        <a href="{{m.url}}" dropdown-toggle>
            {{m.title}} <b class="caret"></b>
        </a>
        <ul  class="dropdown-menu">
            <li ng-repeat="sm in m.submenu" >
                {{sm.divider}}
                <b ng-if="sm.header">{{sm.header}}</b>
                <a href="{{sm.url}}" ng-if="sm.url && sm.title">{{sm.title}}</a>
            </li>
        </ul>
    </li>
    <li  ng-if="m.submenu === undefined">
        <a href="{{m.url}}" >
            {{m.title}} 
        </a>
    </li>
    <span ng-repeat-end></span>
</ul>

【讨论】：