Skip to content

Instantly share code, notes, and snippets.

@danamajid
Created November 7, 2014 18:17
Show Gist options
  • Save danamajid/9e868b36177a2c0243cb to your computer and use it in GitHub Desktop.
Save danamajid/9e868b36177a2c0243cb to your computer and use it in GitHub Desktop.
Simple Dropdown Directive AngularJS
app.directive('hasDropdown', function ($window, $timeout) {
return {
restrict: 'A',
replace: false,
link: function (scope, elm, attrs) {
elm.bind("click", open);
function open(e) {
elm[0].classList.add("open");
$timeout(function () {
$window.addEventListener('click', close);
});
}
function close(e) {
console.log(e.target);
if ((e.target.parentNode !== elm[0]) && (e.target !== elm[0])) {
$window.removeEventListener('click', close);
elm[0].classList.remove("open");
}
}
}
};
});
// usage:
// <div id="user-navigation" has-dropdown>
// <div class="anchor">
// <img src="avatar.png" width="30" height="30">
// <span class="name">Dana Majid</span>
// </div>
// <div class="dropdown">
// <a href="/user/me">View Profile</a>
// <a href="/user/settings">Account Settings</a>
// <a href="/user/logout">Logout</a>
// </div>
// </div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment