[AngularJS] 製作 jQuery MouseWheel directive

相依套件：jquery-mousewheel

Html

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

JavaScript

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');
        });
    };
});