DropDown directive using angular

Question

I have the following directive for a drop down menu (http://jsfiddle.net/77f4m6n5/2/):

<a href="#" dropdown>Open
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</a>

And the directive is the following:

app.directive("dropdown", dropdown);

function dropdown() {

  var dropdown = {
    link: link,
    replace: false,
    restrict: "A"
  };

  return dropdown;

  function link(scope, element, attributes) {   
    element.bind("click", function(event)   {                                                
        element.children().toggleClass("active");
   });  
  } 
}

Can I create such a directive but more in "an angular way"? I think I should have a directive for the link and another for the dropdown, no?

You could look into ng-click, ng-show/ng-hide

user3791775
– user3791775

2016-04-23 16:46:12 +00:00
Commented Apr 23, 2016 at 16:46 — user3791775
– user3791775, Commented Apr 23, 2016 at 16:46

Marco V · Accepted Answer · 2016-04-23 19:45:39Z

1

This would be the more angular way of doing it:

.directive('dropdown', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind("click", function(event)   {                                                
        element.children().toggleClass("active");
    },
    replace: false,
    restrict: 'A'
  };
});

answered Apr 23, 2016 at 19:45

Marco V

2,6738 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

DropDown directive using angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related