Манипулировать dom с AngularJS

Question

Я хочу преобразовать DOM в следующий список в раскрывающийся список меню. в DOM через AngularJS

<div class="maincontent"> 
     <my-directive></my-directive> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 4</li> 
     </ul> 
     </div> 

директива

var app = angular.module("myModule", []) 
.directive('myDirective', function(){ 
    return { 
    //.... 
    } 
}); 

Answer 1

Я не думаю, что директива элемент будет работать в этом случае, как вы хотели бы что-то, чтобы вызвать выпадающее меню (как кнопка мыши).

Вот что я сделал:

app.directive('dropdown', function($document) { 
    return { 
     restrict: "C", 
     link: function(scope, elem, attr) { 

      elem.bind('click', function() { 
       elem.toggleClass('dropdown-active'); 
       elem.addClass('active-recent'); 
      }); 

      $document.bind('click', function() { 
       if(!elem.hasClass('active-recent')) { 
        elem.removeClass('dropdown-active'); 
       } 
       elem.removeClass('active-recent'); 
      }); 

     } 
    } 
}); 

Я сделал это с атрибутом класса, и вот plunker: http://plnkr.co/edit/IipeWJtDWGuBAxtWAadV?p=preview