Всё достаточно просто, много раз использовал, но надо бы и здесь выложить.
Допустим, нам нужно вешать AngularJS-обработчики на DOM-события mouseenter и mouseleave .
Для этого пишем генератор директив по массиву:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 и тп.
Similar Posts
хотя и использовать не так удобно.