AngularJS закрытия DIV, который показывает на нг нажмите

Question

Я создал кнопку

<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button> 

который показывает <div ng-show=appearOnChoice> по щелчку и переключает обратно при нажатии еще раз!

$scope.chooseOptions=function(){ 
    $scope.appearOnChoice=!$scope.appearOnChoice; 

    } 

Однако, я также хочу этот элемент, чтобы скрыть еще раз, когда пользователь щелкает где-нибудь за пределами этого div элемента. Как я могу это сделать? Мне нужно строго придерживаться AngularJS и не использовать jQuery.

Надеюсь, вы можете мне помочь в этом.

EDIT: Я пытался адаптировать некоторые из событий начальной загрузки DatePicker, но я не уверен, как применять его правильно

$scope.$on('datepicker.focus', focusElement); 
scope.$watch('isOpen', function(value) { 
     if (value) { 
      scope.$broadcast('datepicker.focus'); 
      scope.position = appendToBody ? $position.offset(element) : $position.position(element); 
      scope.position.top = scope.position.top + element.prop('offsetHeight'); 

      $document.bind('click', documentClickBind); 
     } else { 
      $document.unbind('click', documentClickBind); 
     } 
     }); 
    var focusElement = function() { 
    $timeout(function() { 
     self.element[0].focus(); 
    }, 0 , false); 
    }; 

Как я могу адаптировать это к моему делу ?!

Answer 1

Я просто решил это, используя выпадающее меню ui bootstrap. Это происходит вместе с опцией is-open и закрывается при нажатии снаружи.

Answer 2

Если у DIV есть фокус, вы можете использовать директиву ng-blur на DIV для запуска set presentOnChoice в false. Однако, если DIV еще не имеет фокуса (что не будет, если вы в зависимости от кнопки, чтобы сделать его видимым), вам нужно будет манипулировать DOM в коде (для обеспечения фокуса) ИЛИ создать пользовательскую директиву установите фокус так, чтобы директива ng-blur работала. Ознакомьтесь с возможностями для этого с this link.

В качестве альтернативы вы можете добавить директиву ng-click для каждого объекта, который будет отображаться на вашем экране, который скроет DIV при запуске. Но я не думаю, что это лучший способ ...

Answer 3

Я думаю, что вам не нужно писать функцию, вы можете использовать ng-init для создания модели, ng-show, чтобы показать/скрыть div на основе значения модели, а с помощью ng-click измените значение модели. Смотрите пример ниже:

var myapp = angular.module('myapp',[]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
<div ng-init="showDiv = true;" > 
 
    <div ng-show="showDiv"> SHOOOOOOOOW </div> 
 
    <button ng-click="showDiv = !showDiv;">Click me</button> 
 
</div> 
 
</div>

Вы можете установить значение модели, чтобы быть ложным, когда пользователь щелкает везде, и установите его еще раз верно, когда речь нажимает кнопку. Если вы сделали скрипку, я могу помочь вам легче :)

Answer 4

Самый простой и чистый способ обработки щелчка - это зарегистрировать и событие на документе, которое удалит элемент, если что-либо кроме него или его детей, щелкнул.

Для примера сервиса, который делает это увидеть GitHub EnzeyNet/Services

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

var divElem 
nzService.registerClickAwayAction(function() { 
    divElem.remove(); 
}, divElem);