CODEWITHSUNDEEP
javascriptangularjsdrop-down-menu
Julio
Julio

Reputation: 35

DropDown doesn't close on click out

I have a problem, if you see the Plunker link, i don't know how to make my drop down close automatically when i click out the directive.

can anybody give suggestions to solve this?

Thanks

Upvotes: 0

Views: 208

Answers (1)

ilmgb
ilmgb

Reputation: 770

Here a solution according to my comment:

http://plnkr.co/edit/2UG1Kj2l3fuVgYXaOB6d?p=preview

I have a custom directive sitting on the body

<body class="container" ng-controller="mainCtrl" dropdown-listener>

which listens on the window for click events.

It fires an event which your dropdownDirective is listening to:

myApp.directive('dropdownListener', function ($window, $rootScope) {
            return {
                restrict: 'A',

        link: function(scope, element, attr) {
          var w = angular.element($window);

          w.bind('click', function(){
            $rootScope.$broadcast('dropdown:close');
          });
                }
            }
        });

In your dropdownDirective

$scope.$on('dropdown:close', function (event, data) {
    $scope.$apply(function() {
      if($scope.open) { //only close when it is open
        $scope.open = !$scope.open; //quick and dirty solution - withouth apply it didn't work. Maybe you could investigate further
      }
      });
  })

Upvotes: 1

Related Questions