Question

我正在编写一个可以动态创建动态菜单的模块。如何在使用css类<li>添加新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一样或类似，在添加完整的ul＆gt; li块后我会运行$("li.dropdown").dropdown()。我是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上发生了一些事情，昨天它正在运作......但它仍然有效。

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，但从来没有理解过它。

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

2 个答案: