Преобразование JQuery в угловую директиву

Question

Ia m new in Angular, но я знаю, что нужно работать в JQuery, у меня проблема с преобразованием некоторой функции в угловую директиву. Может кто-нибудь помочь мне о том, что это моя функции JQuery

$('.spinner .btn:first-of-type').on('click', function() { 
    $(this).closest('.spinner').find('input').val(function(i, v) { 
    return parseInt(v, 10) + 1; 
    }); 
}); 
$('.spinner .btn:last-of-type').on('click', function() { 
    $(this).closest('.spinner').find('input').val(function(i, v) { 
    return parseInt(v, 10) - 1; 
    }); 
}); 

Answer 1

AngularJS поставляется с собственной усеченной версией JQuery называется jQLite. Вы можете использовать его так:

angular.element(<selector>).<operation> 

Вы можете найти больше документации here

ПРИМЕЧАНИЕ: Вам обычно не нужно использовать JQuery. Хотя jQuery отлично работает с Angular, вы хотите использовать больше углового стиля разработки и DOM-манипуляции, используя директивы.

Answer 2

angular.module("yourmodulname").directive("spinnerDirective", spinnerDirective); 

function spinnerDirective(){ 
    return { //Edit -1 
restrict:"A", //restrict the directive to the attribute 
link: "spinnerDirectiveLink" 
    }//Edit-1 
} 

function spinnerDirectiveLink(scope, element, attribute){ 


$('.spinner .btn:first-of-type').on('click', function() { 
     $(this).closest('.spinner').find('input').val(function(i, v) { 
     return parseInt(v, 10) + 1; 
     }); 
    }); 
    $('.spinner .btn:last-of-type').on('click', function() { 
     $(this).closest('.spinner').find('input').val(function(i, v) { 
     return parseInt(v, 10) - 1; 
     }); 
    }); 

} 

HTML

<p spinner-directive></p> 

Поскольку ваш вопрос не ясно, на задаче, это общий способ выпишем директиву. Надежда отсюда вам нужно взять на себя, чтобы преобразовать в вашу задачу.