Динамическое добавление выпадающего меню в AngularJS + Bootstrap

Question

Я пишу модуль, который будет создавать динамическое меню на лету. Как запустить директиву после добавления нового <li> с классом css dropdown, который также добавлен ng-классом.
Код:

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. Что-то случилось с css на 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} 

где п указывает на массив список некоторых HTML я нажимаю на страницу. Когда есть подменю элемент массива меню

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

Я попытался UI-самозагрузки, но не получил мою голову вокруг него.