javascript - Angular 切换自定义下拉菜单

Question

我有一个自定义下拉选择器。当我单击浏览器上的其他任何位置时，我想切换下拉菜单。 toggleModules() 在下拉列表中工作。

数据: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 :切换 Fn -

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

同一 Controller :$document 点击事件:

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

Answer 1

谢谢大家。我找到了一个适合我的解决方案。

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