Angular js - лучший способ использовать функцию jQuery в моем случае

Я новичок в AngularJS и с помощью плагина jQuery (Nice Scroll) в нескольких элементах моих проектов. У меня есть следующий код, и он работает хорошо.Angular js - лучший способ использовать функцию jQuery в моем случае

Сервис

.service('nicescrollService', function() { 
     var ns = {}; 
     ns.niceScroll = function(selector, color, cursorWidth) { 
      $(selector).niceScroll({ 
       cursorcolor: color, 
       cursorborder: 0, 
       cursorborderradius: 0, 
       cursorwidth: cursorWidth, 
       bouncescroll: true, 
       mousescrollstep: 100 
      }); 
     } 

     return ns; 
    })

Директива

.directive('niceScroll', ['nicescrollService', function(nicescrollService){ 
     return { 
      restrict: 'A', 
      link: function(scope, element) { 

       //Scrollbar for HTML(not mobile) but not for login page 
       if (!$('html').hasClass('ismobile')) { 
        if (!$('.login-content')[0]) { 
         nicescrollService.niceScroll('html', 'rgba(0,0,0,0.3)', '5px'); 
        } 

        //Scrollbar Tables 
        if ($('.table-responsive')[0]) { 
         nicescrollService.niceScroll('.table-responsive', 'rgba(0,0,0,0.5)', '5px'); 
        } 

        //Scrill bar for Chosen 
        if ($('.chosen-results')[0]) { 
         nicescrollService.niceScroll('.chosen-results', 'rgba(0,0,0,0.5)', '5px'); 
        } 
       } 
      } 
     } 
    }])

HTML

<html data-ng-app="xxx" data-nice-scroll></html> 
<table class="table-responsive" data-nice-scroll></table> 
....

У меня есть еще некоторые элементы, которые я необходимо использовать этот плагин с различными настройками. Так что я делаю правильно? или есть ли другие умные способы в Угловом, чтобы справиться с этим делом?

С уважением, Rushenn

источник

2015-05-24 Body

вам не нужна услуга, если вам нужно использовать селектор Jquery, лучше использовать его в собственность связочной директивы как:

.directive('niceScroll', [function(){ 
     return { 
      restrict: 'A', 
      link: function(scope, element) { 

       scope.niceScroll = function(selector, color, cursorWidth) { 
        $(selector).niceScroll({ 
         cursorcolor: color, 
         cursorborder: 0, 
         cursorborderradius: 0, 
         cursorwidth: cursorWidth, 
         bouncescroll: true, 
         mousescrollstep: 100 
        }); 
       }; 

       //Scrollbar for HTML(not mobile) but not for login page 
       if (!$('html').hasClass('ismobile')) { 
        if (!$('.login-content')[0]) { 
         scope.niceScroll('html', 'rgba(0,0,0,0.3)', '5px'); 
        } 

        //Scrollbar Tables 
        if ($('.table-responsive')[0]) { 
         scope.niceScroll('.table-responsive', 'rgba(0,0,0,0.5)', '5px'); 
        } 

        //Scrill bar for Chosen 
        if ($('.chosen-results')[0]) { 
         scope.niceScroll('.chosen-results', 'rgba(0,0,0,0.5)', '5px'); 
        } 
       } 
      } 
     } 
    }])

источник

2015-05-24 19:47:49

Angular js - лучший способ использовать функцию jQuery в моем случае

ответ

Смежные вопросы