Как сделать этот 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). Нет необходимости ждать, пока документ будет готов.

Вот супер простой plunker: https://plnkr.co/edit/1N5PbN?p=preview