Как я могу скрыть div на клик снаружи, используя angularjs без написания директивы

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 "dropdown-menu" при клике снаружи. Пожалуйста, кто-нибудь, помогите мне.

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
}