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

Question

我正在编写一个模块,可以动态创建动态菜单.如何在添加新<li>的css类后运行指令,该类dropdown也由ng-class添加.
代码:

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一样或类似,我会$("li.dropdown").dropdown()在添加完整的ul> li块之后运行.我是Angular的新手,我希望以有棱角的方式做到这一点.

我读了关于指令,如何使用它们.但我找不到如何在运行时应用指令.我transclude: element在一个指令(ui.bootstrap.dropdownToggle)中读过没有启用它.我确信有一种简单的方法,但我自己也找不到......

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发生了一些事情,昨天它正在工作......但它仍然有效.