Директивы для обработки DOM-событий в AngularJS

• 01, 30, 2014
•  bullgare
•  Angular.js
• комментария 2

Всё достаточно просто, много раз использовал, но надо бы и здесь выложить.
Допустим, нам нужно вешать AngularJS-обработчики на DOM-события mouseenter и mouseleave.
Для этого пишем генератор директив по массиву:

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

angular.forEach(['Mouseenter', 'Mouseleave'], function (eName) {
	var aName = 'mm' + eName,
		eName = eName.toLowerCase();
	directives.
		directive(aName, ['$parse', function($parse) {
			return {
				restrict: 'A',
				link: function link($scope, $element, attrs) {
					var fn = $parse(attrs[aName]);
					$element.bind(eName, function ($event) {
						$scope.$apply(function () {
							fn($scope, {$event: $event});
						});
					});
				}
			};
		}]);
});

Ну и можно добавлять названий дректив по вкусу.
Использование:

<li
	ng-repeat="gift in selectedGroup.gifts"
	ng-class="{'selected': gift.id == selectedGift.id, 'hovered': gift.id == hoveredGift.id}"
	ng-click="selectGift(gift)"
	mm-mouseenter="hoveredGift = gift)"
	mm-mouseleave="hoveredGift = undefined"
>
	<div class="gift-container">
		<b class="{{gift.key}}"></b>
	</div>
</li>

Результат — http://grab.by/tXHy.
Таким же образом можно делать директивы для любых событий: focus, blur, keypress и тп.