CODEWITHSUNDEEP
javascriptangularjsangularjs-directivedirective
Tauqeer Hassan
Tauqeer Hassan

Reputation: 109

Manipulate dom with AngularJS

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 {
    //....
  }
});

Upvotes: 0

Views: 70

Answers (1)

Aakash Thakur
Aakash Thakur

Reputation: 3895

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

Upvotes: 1

Related Questions