angular dropdown directive

Question

i am trying to create a dropdown menu using directives from angularJS and so far it looks like this:

<div class="dropdown">
  <button class="button">Dropdown</button>
  <ul>
    <li><a>Menu Item 1</a></li>
    <li><a>Menu Item 2</a></li>
  </ul>
</div>

This is the html layout and this is the directive so far:

myApp.directive('dropdown', function($parse) {
    return {
        restrict: "C",
        link: function(scope, elem, attr) {

            var isDisabled = $parse(attr.ngDisabled);

            var toggleMenu = function() {
                if(!elem.hasClass('dropdown-active') && !isDisabled(scope))
                    elem.addClass('dropdown-active');
                else
                    elem.removeClass('dropdown-active');
            };

            elem.bind('click', toggleMenu);

        }
    }
});

So far it works, when i press on the button, the list opens and when i press again it closes but now i have a problem.. i need to make it to close when i press anywhere outside the dropdown.

Can i do that without using jQuery? I am trying to do this project with just AngularJS.

Thank you in advance, Daniel.

Link to Plunker (here i have a problem, when i press on a dropdown, the other one doesnt close)

http://plnkr.co/edit/OrfUVg8KsOhAxqLwn1li?p=preview

My guess would be you may need to copy jqueryui's technique and create a full page invisible div that sits under the dropdown menu div with an onclick close. — mnsr
– mnsr, Commented May 5, 2014 at 23:54
You should look at the source for the dropdown in ui-bootstrap: github.com/angular-ui/bootstrap/blob/master/src/dropdown/… For example, they close the dropdown if the user hits the ESC key. Perhaps you could model yours after this. Better yet, why not just use their dropdown? You don't actually have to use bootstrap, you can replace or override their templates and just assign your own classes. — aet
– aet, Commented May 6, 2014 at 0:37
Bind an event onto the window on toggleIn, and unbind it on toggleOut. In the event check to see if the event target is the directive element, if not, toggleOut — Zack Argyle
– Zack Argyle, Commented May 6, 2014 at 2:16

Pacuraru Daniel · Accepted Answer · 2014-05-06 15:24:55Z

I found a way to make this happen, what i did is i use a class 'active-recent' and than just close all the opened menus expect the one that has this class, and just right after, i remove the recent class, so next time when i press on other dropdown, this last one closes aswell.

myApp.directive('dropdown', function($document) {
    return {
        restrict: "C",
        link: function(scope, elem, attr) {

            elem.bind('click', function() {
                elem.toggleClass('active');
                elem.addClass('active-recent');
            });

            $document.bind('click', function() {
                if(!elem.hasClass('active-recent')) {
                    elem.removeClass('active');
                }
                elem.removeClass('active-recent');
            });

        }
    }
});

http://plnkr.co/edit/wzJkSb0bU53t7liOoVJZ?p=preview

mnsr · Accepted Answer · 2014-05-06 00:15:41Z

0

This is from something i made as a test about a year back which originally didn't have the 'click anywhere to close' functionality in it. I just forked it and used JqueryUI's technique, and created an overlay div that has an ng-show, and ng-click. It's a bit rough, and you can neaten it up. But it works:

app.directive("dropdown", function() {
  return {
    restrict: 'A',
    link: function(scope) {
      scope.showDropdown = function() {
        if (scope.showList) {
          scope.showList = false;
          scope.overlay = false;
        }
        else {
          scope.showList = true;
          scope.overlay = true;
        }
      }
    }
  }
});

Dropdown HTML:

<div class="overlay" ng-show="overlay" ng-click="showList = false;overlay = false;"></div>
<div class="btn btn-info" ng-click="showDropdown()" dropdown>{{selectedCar}} <i class="caret"></i></div>
  <div class="drop-down" ng-show="showList" dropdown-options ng-transclude>
    <ul> 
      <li ng-repeat="car in viewModel"><a href="" ng-click="selectItem(car.n)">{{car.n}}</a></li>
    </ul>
  </div>
</div>

overlay CSS:

.overlay { background:transparent; width:100%; height:100%; position:absolute; top:0; left:0; }

Plunkr:

http://plnkr.co/edit/5IpClw?p=preview

answered May 6, 2014 at 0:15

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

4 Comments

Pacuraru Daniel Over a year ago

the problem with your technique is that i cannot create more dropdowns and reuse the directive in an easy way

Pacuraru Daniel Over a year ago

I tried with $document injector and i wrote $document.bind('click', closeMenu); but i have a problem, when i press outside of menu it works but when i press on other dropdown, the both dropdowns are opened, the other one doesnt close.

mnsr Over a year ago

well like i said, it's a rough idea for you to expand upon. One thing you could do for multiple dropdowns is actually create a div with that overlay css on it inside your directive, and add an ng-show/click thing to it. so when you close it, it destroys that div.

bto.rdz Over a year ago

@PacuraruDaniel to reuse that code use isolated scope

Jyoti Kumari · Accepted Answer · 2014-05-06 07:01:50Z

0

I have used a dropdown in which if you take the cursor outside the dropdown it closes automatically.You can try this

  <ul class="nav navbar-nav">
                    <li class="dropdown" >
                        <button class="dropdown-toggle  form-control" data-toggle="dropdown" >
                            {{selectedParent.displayName}}<span class="caret"></span>
                        </button>
                        <div class="dropdown-menu">

                            /*Your drop down list here*/
                        </div>
                    </li>
                </ul>

Hope it's helpful!

answered May 6, 2014 at 7:01

Jyoti Kumari

967 bronze badges

Comments

Mike_Laird · Accepted Answer · 2014-10-22 00:18:37Z

0

The angular-dropdowns directive is another way to go. Its available from github at

https://github.com/jseppi/angular-dropdowns

It can be used in a select option style or as a button with a menu of dropdowns.

answered Oct 22, 2014 at 0:18

Mike_Laird

1,1244 gold badges17 silver badges42 bronze badges

Comments

un.spike · Accepted Answer · 2015-02-17 15:12:33Z

warning: changeEvent function must be inside controller for better modification without touching directive.

var app = angular.module('main', []);
app.controller('exampleCtrl', exampleCtrl);
exampleCtrl.$inject = [];
function exampleCtrl(){
  var vm = this;
  vm.testData = ['one', 'two', 'three'];
  vm.selectedItem = vm.testData[0];
  vm.changeEvent = function (item){
    vm.selectedItem = item;
  }
}
app.directive('uiDropdown', uiDropdown);
uiDropdown.$inject=[];
function uiDropdown (){
  return {
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {
      var ulDropdown = element.next("[ui-dropdown-data]");
      element.on('click', function() { // Click on ui-dropdown
        ulDropdown[0].style.display = ulDropdown[0].style.display === 'none' ? 'block' : 'none';
      });
      ulDropdown.on('click', function (data) { //click on ui-dropdown-data
        ulDropdown[0].style.display = 'none';
      });
      element.parent().on('mouseleave', function () { // leave parent div
        ulDropdown[0].style.display = 'none';
      });
    }
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main">
  <div ng-controller="exampleCtrl as vm">
    <div ui-dropdown style="cursor:pointer; border:1px solid; width:50px;">{{vm.selectedItem}}</div>
    <ul style="display: none" ui-dropdown-data>
      <li style="border:1px dotted;width:50px; cursor:pointer" ng-repeat="item in vm.testData" ng-click="vm.changeEvent(item)">{{item}}</li>
    </ul>
    <div>
</div>

Collectives™ on Stack Overflow

angular dropdown directive

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related