如何在angularjs中集成jQuery函数？

Question

I want to add the following jQuery function to an existing angularjs application:

$.fn.stars = function() {
    return this.each(function(i,e){$(e).html($('<span/>').width($(e).text()*16));});
};

$('.stars').stars();

http://jsbin.com/IBIDalEn/2/edit?html,css,js,output

The html for this should be:

Rating: <span class="stars">4.3</span>

But: where do I have to put the jquery function in order to work with angularjs? And where do I have to call this $('.stars').stars(); ?

Answer 1

I know this isn't answering your question directly @Michael does a good job of that. However i think its worth noting that for something as simple as this there is no need for jquery. You could roll out your own simple directive and do it right with angular. Plus you leverage data binding to make it update itself.

Plus Michael doesn't answer the issue of where do you extend JQuery to use your custom stars() method? It shouldn't be in the directive otherwise it will be called every time a directive is added to the page. (image if it was in a ng-repeat )

.directive('stars', function () {
    return {
        restrict: 'EA',
        template: '<span class="stars"><span ng-style="style"></span></span>{{stars}}',
        scope: {
            stars: '='   
        },
        link: function ($scope, elem, attrs){
            $scope.$watch('stars', set);

            function set(){
                $scope.style = {
                    width: (parseFloat($scope.stars) * 16) + '%'
                };
            }
        }
    }
});

Its quite simple you define your template, the two spans. Then you watch the $scope.stars property so you can update your rating should the value change.

see fiddle: http://jsfiddle.net/g7vqb5x9/1/

Answer 2

You should never manipulate the DOM inside a controller. A directive link is the correct spot for DOM manipulation.

Angular.element is already a jQuery object:

angular.module('app', [])
  .directive('stars', function() {
    return {
      restrict: 'C',
      link: function($scope, element) {
        element.stars();
      }
    };
  });

BTW: a span is an inline element and has NO height and width. you need to use a block element or override the display attribute.

Plunker