CODEWITHSUNDEEP
angularjsangularjs-directive
Stephanie Caldwell
Stephanie Caldwell

Reputation: 647

How can I toggle a drop down menu by using an AngularJS directive?

I have the following code that attempts to create a dropdown menu using AngularJS, but it doesn't work:

CSS:

.display_none {
  display:none;
}

HTML:

<div ng-app="app">
  <div dropdown>
    <div class="drop_down display_none">
      <div id="elementWrap">
        // stuff
      </div>
    </div>
  </div>
</div>

AngularJS:

angular.module("app")
  .directive("dropdown",function(){
    return function(scope,element){
      element.bind("click",function(){
        if(element.find('.drop_down').hasClass('display_none'))
        {
          element.find('.drop_down').removeClass('display_none');
          element.find("#elementWrap").stop(true,true).delay(100).slideDown(350);
        }
        else
        {
          element.find("#elementWrap").stop(true,true).delay(100).slideUp(350,function(){
            element.find('.drop_down').addClass('display_none');
          });
        }
      });
    };
  });

Upvotes: 0

Views: 10384

Answers (2)

Shohel
Shohel

Reputation: 3934

find() - Limited to lookups by tag name using angular jqLite, so you have to use jquery plugin.

Upvotes: 0

Wottensprels
Wottensprels

Reputation: 3327

First, you should read through this:

"Thinking in AngularJS" if I have a jQuery background?

Then, you should have a look at this:

http://angular-ui.github.io/bootstrap/

angular-ui provides ui.bootstrap.dropdownToggle. You could either use that or inspect that code and rebuild it's functionality.

Since you are already using a directive, you could use element in a linking function, rather than search-and-modify it the jQuery (lite) way.

Upvotes: 4

Related Questions