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

Question

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

What do you mean by "doesn't work"? – Wottensprels Jul 08 '13 at 04:08 — Wottensprels, Jul 08 '13 at 04:08
I click and nothing happens. – Stephanie Caldwell Jul 08 '13 at 04:22 — Stephanie Caldwell, Jul 08 '13 at 04:22
Are any errors throwed? Also, see my answer below. – Wottensprels Jul 08 '13 at 04:23 — Wottensprels, Jul 08 '13 at 04:23
Bonus points for trying to use a directive. – superluminary May 08 '14 at 11:49 — superluminary, May 08 '14 at 11:49

score 4 · Answer 1 · edited May 23 '17 at 12:12

4

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.

edited May 23 '17 at 12:12

Community

1
1

answered Jul 08 '13 at 04:11

Wottensprels

3,307
2
29
38

The thinking an Angular post is a great place to start – superluminary May 08 '14 at 11:52

score 0 · Answer 2 · answered Jul 01 '14 at 06:48

0

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

answered Jul 01 '14 at 06:48

Shohel

3,886
4
38
75

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

2 Answers2