用AngularJS操作dom

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'); 
      }); 

     } 
    } 
}); 

我用class属性使得它和这里的plunker：http://plnkr.co/edit/IipeWJtDWGuBAxtWAadV?p=preview