Директивы для Angular.js

• 01, 02, 2013
•  bullgare
•  javascript
• No Comments.

Писать свои директивы для angular.js просто, а использовать их потом — удобно.

Вот к примеру, нет у angular по умолчанию обработчика увода фокуса с элемента. Написать соответствующую директиву очень просто:

angular.module('buExtra', []).
	directive('ngBlur', function() {
		return {
			restrict: 'A',
			link: function postLink(scope, element, attrs) {
				element.bind('blur', function () {
					scope.$apply(attrs.ngBlur);
				});
			}
		};
	});

Использовать её надо вот так:

<input ng-model="set.weight" ng-blur="setWeightBlured(set)" />

В контроллере:

$scope.setWeightBlured = function (setData) {
	console.log(setData.id);
};

Почитать про ngBlur — https://github.com/angular/angular.js/issues/1277.
Примеры директив — http://habrahabr.ru/post/164493/.

UPDATE:

Правильно писать директивы лучше так:

angular.module('buExtra', []).
	directive('ngTouchstart', ['$parse', function($parse) {
		return {
			restrict: 'A',
			link: function link($scope, $element, attrs) {
				var fn = $parse(attrs.ngTouchstart);
				$element.bind('ngTouchstart', function ($event) {
					$scope.$apply(function () {
						fn($scope, {$event: $event});
					});
				});
			}
		};
	}]);

А для touch-событий — вот так:

var directives = angular.module('buExtra', []);
	angular.forEach(['Touchstart', 'Touchend'], function (eName) {
		var aName = 'ng' + 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});
							});
						});
					}
				};
			}]);
	});