このjQueryをAngularJSディレクティブで使用するにはどうすればいいですか？

Question

私は、角から次のjQueryを使用したい：

jQuery.prototype.stars = function() { 
    return $(this).each(function() { 
    var val = parseFloat($(this).html());  
    var size = Math.max(0, (Math.min(5, val))) * 16; 
    var $span = $('<span />').width(size); 
    $(this).html($span); 
}); 
} 

$(function() { 
    $('span.stars').stars(); 
}); 

コードはここからコピーされます。Turn a number into star rating display using jQuery and CSS

ディレクティブでこのような何かを追加する必要がありそうです。

link: function ($scope, elem, attrs) {  
    angular.element(document).ready(function() { 
    $('span.stars').stars() 
... 

私は関数stars（）を書き直す方法がわかりません。jQueryは（jQuery.prototype.stars）で拡張されています。あなたの助けをありがとう！

Answer 1

jQuery関数が行っているのは、数字を<span></span>タグで置き換えることです。このタグの幅は、タグに含まれる数字に基づいています。私はちょうど関数にディレクティブの一部を行うことを提案し、これに似た角度、何かのためにそれをリファクタリングします：

link: function($scope, elem, attrs) { 
function starify() { 
    var val = parseFloat(angular.element(elem).html()); 
    var size = Math.max(0, (Math.min(5, val))) * 16; 
    var span = angular.element('<span/>').css('width', size+'px'); 
    angular.element(elem).html(span[0].outerHTML); 
} 
starify(); 
} 

これは、の角度基本要素プロバイダ（jQlite）を使用しています。文書が準備されるのを待つ必要はありません。

ここにスーパーシンプルなプランジャがあります：https://plnkr.co/edit/1N5PbN?p=preview