angular-deep-blur

Live Demo

Click the toggle button to toggle the dropdown menu. Click outside the dropdown to hide the dropdown.

Demo Source

<div ng-init="isExpanded = true" deep-blur="isExpanded = false">
    <button ng-click="isExpanded = !isExpanded" ng-attr-expanded="{{ '{{ isExpanded }' + '}' }}">
        Toggle
    </button>
    <ul ng-show="isExpanded">
        <li><button>One</button></li>
        <li><button>Two</button></li>
        <li><button>Three</button></li>
    </ul>
</div>

Overview

angular-deep-blur detects when neither the element nor any of its children are in focus (i.e. the element is blurred by the focusing of another element outside the element.) This is especially useful if you want to hide a dropdown on blur.

Download

Grab the latest from GitHub or use your favorite package manager:

Via Bower

bower install angular-deep-blur

Via NPM

npm install angular-deep-blur

Usage

Include angular-deep-blur.js in your application, after Angular is included.

<script src="path/to/angular.js"></script>
<script src="path/to/angular-deep-blur.js"></script>

You may use an AMD or CommonJS loader as well.

Initialize your Angular application with the mp.deepBlur module as a dependency:

angular.module('app', [ 'mp.deepBlur' ]);

Then use the deep-blur attribute on an element to specify an expression that will be evaluated when neither the element nor any of its children are in focus:

<div deep-blur="hideDropdown()">
    <!-- ... -->
</div>

License

MIT