將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> 

因爲你的問題不是在任務清楚，這是我們寫下指令的一般方式。希望從這裏開始，你需要接手轉換爲你的任務。