AngularJS closing a div which shows up on ng-click

Question

I created a button

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

Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!

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

  }

However, I also want this element to hide again, when the user clicks anywhere outside this div element. How can I do this? I need strictly stick with AngularJS and not use jQuery.

Hope you can help me with that.

EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly

 $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);
  };

How can I adapt this to my case?!

Answer 1

I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.

Answer 2

If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.

alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...

Answer 3

I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:

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>

You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)

Answer 4

The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.

For an example of a service that does this see GitHub EnzeyNet/Services

Sorry about the lack of documentation there but after injecting the service you would use it like this.

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