outerClick

Provides a directive to specifiy a behaviour when click/tap events happen outside an element. This can be easily used to implement eg. close on outer click feature for a dropdown.

Usage

Declare it as a dependency to your app unless you have already included some of its super-modules.

angular.module('myApp', ['mobile-angular-ui']);

Or

angular.module('myApp', ['mobile-angular-ui.core']);

Or

angular.module('myApp', ['mobile-angular-ui.core.outerClick']);

Use ui-outer-click to define an expression to evaluate when an Outer Click event happens. Use ui-outer-click-if parameter to define a condition to enable/disable the listener.

<div class="btn-group">
  <a ui-turn-on='myDropdown' class='btn'>
    <i class="fa fa-ellipsis-v"></i>
  </a>
  <ul
    class="dropdown-menu"
    ui-outer-click="Ui.turnOff('myDropdown')"
    ui-outer-click-if="Ui.active('myDropdown')"
    role="menu"
    ui-show="myDropdown"
    ui-shared-state="myDropdown"
    ui-turn-off="myDropdown">

    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
    <li class="divider"></li>
    <li><a>Separated link</a></li>
  </ul>
</div>

Services

app.directive('myDirective', function('bindOuterClick'){
  return {
    link: function(scope, element) {
      bindOuterClick(element, function(scope, extra){
        alert('You clicked ouside me!');
      }, function(e){
        return element.hasClass('disabled') ? true : false;
      });
    }
  };
});

Directives