CODEWITHSUNDEEP
javascripthtmlangularjs
ChaseHardin
ChaseHardin

Reputation: 2269

ng-click Not working Correctly

I am working on adding a drop down menu, but have a bug I am trying to fix. Currently, when I click on the icon, the drop down will work. However, when clicking on other buttons or other areas of the website, the drop down stays open. I want it to close... There is a lot of code in this project, so I have taken the parts that are creating the error. Any suggestions?

HTML:

<div class="fa fa-ellipsis-v action-icon" ng-class="{'selected': menuActions}" ng-click="dropDownMenu()"></div>

JavaScript:

// This function handles the ellipsis
            $scope.dropDownMenu = function () {
                  $scope.myShareFeature = false;
                  $scope.mySignatureFeature = false;
                  $scope.menuActions = !$scope.menuActions;

Upvotes: 0

Views: 89

Answers (2)

Simcha Khabinsky
Simcha Khabinsky

Reputation: 2039

Look at this answer here:

Click everywhere but here event

He creates his own directive - and then uses it on the controller:

app.directive('clickAnywhereButHere', function($document){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('click', function(e) {
        // this part keeps it from firing the click on the document.
        e.stopPropagation();
      });
      $document.bind('click', function() {
        // magic here.
        scope.$apply(attr.clickAnywhereButHere);
      })
    }
  }
})

HTML

<div class="fa fa-ellipsis-v action-icon" ng-class="{'selected': menuActions}" ng-click="dropDownMenu()" click-anywhere-but-here="dropDownMenu()"></div>

Upvotes: 1

Unrealsolver
Unrealsolver

Reputation: 142

Probably, you have to use top-level 'click' event listener, to close your menu. Also, you should stop 'click' event propagation inside menu. However, it will be better, if you'll use some existing library or something else.

Upvotes: 0

Related Questions