I want to convert DOM mean the following list to a dropdown list of menu. in DOM through 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>
directive
var app = angular.module("myModule", [])
.directive('myDirective', function(){
return {
//....
}
});
I don't think a directive element would work in this case as you would want something to trigger the dropdown(as a button click).
Here's what I did:
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');
});
}
}
});
I made it with class attribute and here's the plunker:http://plnkr.co/edit/IipeWJtDWGuBAxtWAadV?p=preview
