javascript - 如何在不编写指令的情况下使用 angularjs 在外部单击时隐藏 div

Question

我想在点击外部(正文或文档)时隐藏一个 div 内容。我不想为此编写任何指令。

我已经写过了，但是按钮点击和 body 点击是一对一的合并。所以如果我点击按钮，它会点击 body 。

<li class="nav-item dropdown" ng-hide="filterClick">
                        <div class="dropdown-menu">
                            <div class="dropdown-item" ng-repeat="filter in filters">
                                <div class="filter-class"></div>
                            </div>
                        </div>
                    </li>

$scope.showDropdown = function () {
      $scope.filterClick = !$scope.filterClick;
       if ($scope.filterClick) {
        angular.element(document).on('click', function () {
            console.log("close");
    });
    } else if(!$scope.filterClick){
        $scope.filterClick = false;
        window.onload = null;
         //--> trigger digest cycle and make angular aware. 
    }
    }

在这里，我想在点击外部时隐藏“下拉菜单”div。请任何人帮助我。

Answer 1

指令

angular.element(document).on('click', function () {
    $scope.$apply(function () {
        $scope.filterClick = true;
    })
});

$scope.showDropdown = function (e) {
    $scope.filterClick = !$scope.filterClick;
    e.stopPropagation(); //This will prevent from bubbling event to document
}