ng-click Not working Correctly

Question

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;

Have you used F12 (Developer tools) in the browser => Console to see where the Javascript error is? (Remember to refresh page after opening Developer Tools) — Simcha Khabinsky, Jul 25 '14 at 13:48
@SimchaKhabinsky yes, I have played around with it, but always struggle using that tool. — ChaseHardin, Jul 25 '14 at 13:48
try this: F12 => Console => Refresh (F5) => Click on the DIV => See any new red in the console? — Simcha Khabinsky, Jul 25 '14 at 13:50
sorry, off-topic: you should learn how to use developer tools. the important tabs are 'elements' for html and 'sources' for your scripts. take the time, it's absolutely worth it. — nilsK, Jul 25 '14 at 13:51
@SimchaKhabinsky okay, I just checked and there is no errors in the console. It is my understanding that everything works fine, but something is not written correctly. — ChaseHardin, Jul 25 '14 at 14:24
@SimchaKhabinsky I played around with the developer tools and fixed the issue. Thanks! — ChaseHardin, Jul 25 '14 at 15:28
Glad to help out. Sometimes learning to fish is better than getting one fish. — Simcha Khabinsky, Jul 25 '14 at 16:09

score 1 · Answer 1 · edited May 23 '17 at 11:50

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>

score 0 · Answer 2 · answered Jul 25 '14 at 13:54

0

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.

answered Jul 25 '14 at 13:54

Unrealsolver

143
4

ng-click Not working Correctly

2 Answers2