[AngularJS]制作jQuery scrollTop scrollLeft directive演示

利用AngularJS 制作jQuery scrollTop scrollLeft directive全代码演示：

Html代码：

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

JavaScript代码:

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