[AngularJS] 製作 jQuery scrollTop scrollLeft directive

Html

原始碼

1. <div jq-scroll-top="viewerScrollTop"  
2.      jq-scroll-left="viewerScrollLeft" 
3. ></div> 

<div jq-scroll-top="viewerScrollTop" 
      jq-scroll-left="viewerScrollLeft"
></div>

JavaScript

原始碼

1. app.directive('jqScrollTop', ['$parse', function($parse){ 
2.    return function(scope, element, attrs) { 
3.        /*解析並取得表達式*/ 
4.        var expr = $parse(attrs['jqScrollTop']); 
5.  
6.        /*監聽變數異動，並更新到 element 上*/ 
7.        scope.$watch(attrs['jqScrollTop'], function(value) { 
8.            element.scrollTop(value); 
9.        }); 
10.  
11.        /*當 element 捲動時更新到變數上*/ 
12.        element.on('scroll', function() { 
13.            expr.assign(scope, element.scrollTop()); 
14.        }); 
15.  
16.        /*在 destroy 時清除事件註冊*/ 
17.        scope.$on('$destroy', function(){ 
18.            element.off('scroll'); 
19.        }); 
20.    }; 
21. }]); 
22.  
23. app.directive('jqScrollLeft', ['$parse', function($parse){ 
24.    return function(scope, element, attrs) { 
25.        /*解析並取得表達式*/ 
26.        var expr = $parse(attrs['jqScrollLeft']); 
27.  
28.        /*監聽變數異動，並更新到 element 上*/ 
29.        scope.$watch(attrs['jqScrollLeft'], function(value) { 
30.            element.scrollLeft(value); 
31.        }); 
32.  
33.        /*當 element 捲動時更新到變數上*/ 
34.        element.on('scroll', function() { 
35.            expr.assign(scope, element.scrollLeft()); 
36.        }); 
37.  
38.        /*在 destroy 時清除事件註冊*/ 
39.        scope.$on('$destroy', function(){ 
40.            element.off('scroll'); 
41.        }); 
42.    }; 
43. }]); 

app.directive('jqScrollTop', ['$parse', function($parse){
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqScrollTop']);

        /*監聽變數異動，並更新到 element 上*/
        scope.$watch(attrs['jqScrollTop'], function(value) {
            element.scrollTop(value);
        });

        /*當 element 捲動時更新到變數上*/
        element.on('scroll', function() {
            expr.assign(scope, element.scrollTop());
        });

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

app.directive('jqScrollLeft', ['$parse', function($parse){
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqScrollLeft']);

        /*監聽變數異動，並更新到 element 上*/
        scope.$watch(attrs['jqScrollLeft'], function(value) {
            element.scrollLeft(value);
        });

        /*當 element 捲動時更新到變數上*/
        element.on('scroll', function() {
            expr.assign(scope, element.scrollLeft());
        });

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