将Jquery转换为角度指令

Question

我是Angular中的新成员，但我知道在Jquery中工作，我将将某些函数转换为Angular指令时遇到了问题。有人可以帮我这个问题，这是我的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中可以正常工作，但您希望使用更多的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> 

因为你的问题不是在任务清楚，这是我们写下指令的一般方式。希望从这里开始，你需要接手转换为你的任务。