Angular toggle benutzerdefinierte dropdown

Question

Ich habe einen benutzerdefinierten Dropdown-Selektor. Ich möchte das Drop-down-Menü umschalten, wenn ich irgendwo anders im Browser klicke. toggleModules() arbeitet innerhalb des Dropdowns.

Daten: modules=["A", "B", "C", "D", "E", "F"]

<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12"> 
    <div class="vov-filters ov-filter-region"> 
     <span ng-click="toggleModules($event)"><label>Module</label> 
      <b id="caret-glyph" class="glyphicon glyphicon-chevron-down pull-right" area-hidden="true"></b> 
     </span> 

     <div id="el1" class="overlay bordered" ng-if="showModules"> 
      <span role="button" ng-click="clearSelectedModules()" class="clear">Clear</span> 
       <div class="filter-checkbox" ng-repeat="entry in modules" ng-click="moduleFilter(entry)"> 
        <label> 
         <input ng-show="entry.show" type="checkbox" ng-model="entry.show"> 
         <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 
         {{entry.name}} 
        </label> 
       </div> 
      </div> 

     </div> 
    </div> 

Controller: Toggle fn -

$scope.toggleModules = function(ev) { 
     ev.preventDefault(); 
     ev.stopPropagation(); 
     $scope.showModules = !$scope.showModules; 
     if ($scope.showModules) { 
     $scope.overlay = true; 
     } else { 
     $scope.overlay = false; 
     } 
    }; 

Same Contoller: $ document Click-Ereignis:

$document.on('click', function(event) { 
    <!-- Start Toggle Module filter --> 
    $scope.toggleModules(event) 
    <!-- End Toggle Module filter --> 
    return $document.off('click', event); 
}); 

Answer 1

Danke Jungs wollen. Ich habe eine Lösung, die gut für mich funktioniert.

$document.on('click', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $scope.$apply(function() { 
     $scope.showModules = false; 
    }); 
    $document.off('click', event); 
}); 

Answer 2

Sie eine n erstellen ew Click-off-Direktive, die einen Klick außerhalb eines div überprüfen und dann tun, was Sie

myApp.directive('clickOff', function($parse, $document) { 
var dir = { 
    compile: function($element, attr) { 
     // Parse the expression to be executed 
     // whenever someone clicks _off_ this element. 
     var fn = $parse(attr["clickOff"]); 
     return function(scope, element, attr) { 
     // add a click handler to the element that 
     // stops the event propagation. 
     element.bind("click", function(event) { 
      console.log("stopProp"); 
      event.stopPropagation(); 
     }); 
     angular.element($document[0].body).bind("click",                 function(event) { 
      console.log("cancel."); 
      scope.$apply(function() { 
       fn(scope, {$event:event}); 
      }); 
     }); 
     }; 
    } 
    }; 
    return dir; 
}); 

Here's a fiddle