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

Question

我要在单击外部（正文或文档）时隐藏div内容。我不想为此写任何指令。

我已经写过，但是按钮单击和正文单击是一对一合并的。所以，如果我单击按钮，它将引起身体的点击。

<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
}