在AngularJS + Bootstrap中动态添加下拉菜单

Question

我正在编写一个模块，它将创建一个动态菜单。如何在使用css类dropdown添加新类后运行指令，这个类也是由ng- <li>添加的。

代码：

angular.module('myapp', ['ui.bootstrap'])
.factory("menuService", ["$rootScope", function($rootScope) {
    "use strict";

    return { 
        menu: function() {
            $rootScope.globalMenu;
        },    
        setMenu: function(menu) {
            $rootScope.globalMenu = menu;
        }
    };

}])
.controller("MainController", ["$scope", "menuService",
    function($scope, menuService){

        menuService.setMenu([{href:"#", label:"Dropdown",
                                dropdown:[{href:"/edit", label:"Edit"}]},
                             {href:'/', label:'test'}]);

        $scope.bodyText = "Some text";


    }]);

这是html格式的代码。

    <ul class="navbar-nav nav navbar-left">
        <li ng-repeat="menu_element in globalMenu" ng-class="{dropdown: menu_element.dropdown != undefined}">
            <a ng-href="{{menu_element.href}}" ng-class="{'dropdown-toggle': menu_element.dropdown != undefined}">
                {{menu_element.label}}
                <b class="caret" ng-if="menu_element.dropdown != undefined"></b>
            </a>
            <ul ng-if="menu_element.dropdown != undefined" class="dropdown-menu">
                <li ng-repeat="sub_element in $parent.menu_element.dropdown">
                    <a ng-href="{{sub_element.href}}">{{sub_element.label}}</a>
                </li>
            </ul>
        </li>
    </ul>

链接至plunker：http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview

所以我想要做的是和jQuery一样或者类似，在添加完整个ul>li块之后，我会运行$("li.dropdown").dropdown()。我是Angular的新手，我想用angular的方式来实现它。

我读过有关指令的内容，以及如何使用它们。但是我找不到如何在运行时应用指令。我在一条指令(ui.bootstrap.dropdownToggle)中读到过transclude: element没有启用它。我确信有一个简单的方法，但是我自己找不到……

Answer 1

解决了！

我终于用ng-if和ng-repeat-start成功了。通过注释中的帮助，我发现ng-class不会运行指令。

    <ul class="navbar-nav nav navbar-left">
        <span ng-repeat-start="menu_element in globalMenu"></span>
        <li ng-if="menu_element.dropdown !== undefined">
              <a ng-href="{{menu_element.href}}" class="dropdown-toggle">
                  {{menu_element.label}}
                  <b class="caret" ></b>
              </a>
              <ul class="dropdown-menu">
                  <li ng-repeat="sub_element in $parent.menu_element.dropdown">
                      <a ng-href="{{sub_element.href}}">{{sub_element.label}}</a>
                  </li>
              </ul>
        </li>
        <li ng-if="menu_element.dropdown === undefined">
              <a ng-href="{{menu_element.href}}">
                {{menu_element.label}}
              </a>
        </li>
        <span ng-repeat-end></span>
    </ul>

Plnkr上的工作示例。Plunker上的css发生了一些事情，昨天它还在工作...但它仍然有效。

Answer 2

很好，这对我很有帮助。我在你的主题上有一个小小的变化。

<ul class="nav navbar-nav">
  <li ng-repeat='link in menu track by $index' ng-class='[{dropdown:link.sub}]'>
    /* normal menu */
    <a ng-if='!link.sub' ng-bind='link.id' ng-click='jump(link.to)'></a>
    /* dropdown menu */
    <a ng-if='link.sub' class="dropdown-toggle" data-toggle="dropdown">
      <span ng-bind='link.id'></span>
      <ul class="dropdown-menu inverse-dropdown">
        /* and repeat for the submenu */
        <li ng-repeat='slink in link.menu track by $index'>
          <a ng-bind='slink.id' ng-click='jump(slink.to)'></a>
        </li>
      </ul>
    </a>
  </li>
</ul>

我的菜单数组是

{id:'name', to:n}

其中n指向一个数组，该数组列出了我推送到页面中的一些html。如果有子菜单，则菜单数组元素为

{id:'name', sub:true, menu:[{id:'name', to:n}, etc.]}

我试过ui-bootstrap，但从来没有想过。