Tag Archives: bind

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

Всё достаточно просто, много раз использовал, но надо бы и здесь выложить. Допустим, нам нужно вешать 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});
						});
					});
				}
			};
		}]);
});

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>

<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>

</li>

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

Расширение базового функционала jquery-ui-виджетов

Захотелось сделать более правильную работу с триггерением/навешиванием обработчиков на события, чем это реализовано в jquery-ui. При этом сам функционал надоело копировать из виджета в виджет. В общем, вот простой добавить методы к своим виджетам:

(function( $ )
{
	"use strict";
/**
 * расширение базового функционала jquery-ui
 */
	$.widget( "my.my_extension", {
		_triggerSmart: function( EventName, Data )
		{
			var me = this;
			var $me = $( me.element );

			$me.trigger( EventName + '.' + me.widgetName, Data );
			return me;
		},
		_bindSmart: function( EventName, Handler )
		{
			var me = this;
			var $me = $( me.element );

		// боремся с повторным навешиванием обработчика
			var events = $.data( $me.get( 0 ), 'events' );
			var filteredEvents = [];
			if ( EventName in events )
			{
				filteredEvents = $.grep( events[EventName], function( Event ) {
					return Event.type == EventName && Event.namespace == me.widgetName;
				} );
			}
			if ( ! filteredEvents.length ) {
				$me.bind( EventName + '.' + me.widgetName, Handler );
			}
			return me;
		}
	} );
}( jQuery ));

(function( $ )

{

"use strict";

/**

* расширение базового функционала jquery-ui

$.widget( "my.my_extension", {

_triggerSmart: function( EventName, Data )

{

var me = this;

var $me = $( me.element );

$me.trigger( EventName + '.' + me.widgetName, Data );

return me;

_bindSmart: function( EventName, Handler )

{

var me = this;

var $me = $( me.element );

// боремся с повторным навешиванием обработчика

var events = $.data( $me.get( 0 ), 'events' );

var filteredEvents = [];

if ( EventName in events )

{

filteredEvents = $.grep( events[EventName], function( Event ) {

return Event.type == EventName && Event.namespace == me.widgetName;

} );

}

if ( ! filteredEvents.length ) {

$me.bind( EventName + '.' + me.widgetName, Handler );

}

return me;

}

} );

}( jQuery ));

Потом для каждого виджета нужно будет указать опциональный второй параметр

$.widget( "my.fast_search", $.my.my_extension,
	{
		options:
		{
			...

$.widget( "my.fast_search", $.my.my_extension,

{

options:

{

...

Внимание нужно обратить на второй параметр $.my.my_extension, который в …

Работа с событиями в jQuery-ui

Если нужно из виджета стриггерить событие, это сделать это можно двумя способами:

this.element.trigger( 'my_event_element', { option1: true } );

1	this.element.trigger( 'my_event_element', { option1: true } );

this._trigger( '_my_event_widget', null, { option1: true } );

1	this._trigger( '_my_event_widget', null, { option1: true } );

Допустим, что наш виджет называется MyCoolWidget. Тогда поймать наши события можно так:

$( '#div' ).MyCoolWidget();
$( '#div' ).
	bind( 'my_event_element', function( Event, Ui ) { console.dir( Ui ) } ).
	bind( 'mycoolwidget_my_event_widget', function( Event, Ui ) { console.dir( Ui ) } );

$( '#div' ).MyCoolWidget();

$( '#div' ).

bind( 'my_event_element', function( Event, Ui ) { console.dir( Ui ) } ).

bind( 'mycoolwidget_my_event_widget', function( Event, Ui ) { console.dir( Ui ) } );

Обратите внимание на второй bind — префиксом к событию в этом случае явлется название виджета в нижнем регистре. Кстати, есть ещё один способ обработать событие от this._trigger — …