[AngularJS] 製作 jQuery MouseWheel directive

相依套件：jquery-mousewheel

Html

原始碼

1. <div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div> 

<div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div>

JavaScript

原始碼

1. app.directive('jqMousewheel', function(){ 
2.    return function(scope, element, attrs) { 
3.  
4.        /*將 element 滾輪事件傳遞到 scope 上*/ 
5.        element.on('mousewheel', function (event) { 
6.            scope.$eval(attrs['jqMousewheel'], { 
7.                $event: event, 
8.                $delta: event.delta, 
9.                $deltaX: event.deltaX, 
10.                $deltaY: event.deltaY 
11.            }); 
12.  
13.            /*通知 scope 有異動發生*/ 
14.            scope.$digest(); 
15.        }); 
16.  
17.        /*在 destroy 時清除事件註冊*/ 
18.        scope.$on('$destroy', function(){ 
19.            element.off('mousewheel'); 
20.        }); 
21.    }; 
22. }); 

app.directive('jqMousewheel', function(){
    return function(scope, element, attrs) {

        /*將 element 滾輪事件傳遞到 scope 上*/
        element.on('mousewheel', function (event) {
            scope.$eval(attrs['jqMousewheel'], {
                $event: event,
                $delta: event.delta,
                $deltaX: event.deltaX,
                $deltaY: event.deltaY
            });

            /*通知 scope 有異動發生*/
            scope.$digest();
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('mousewheel');
        });
    };
});