Question

我想将以下jQuery函数添加到现有的angularjs应用程序中：

$.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

这个html应该是：

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

但是：我必须在哪里放置jquery函数才能使用angularjs？我在哪里可以调用此$('.stars').stars();？

Answer 1

我知道这不是直接回答你的问题@Michael做得很好。但是我认为值得注意的是，对于像这样简单的东西，不需要jquery。您可以推出自己的简单指令，并使用angular进行操作。此外，您利用数据绑定使其自行更新。

Plus Michael无法解决您在何处扩展JQuery以使用自定义stars()方法的问题？它不应该在指令中，否则每次将指令添加到页面时都会调用它。（图像，如果它在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) + '%'
                };
            }
        }
    }
});

您可以非常简单地定义模板，即两个跨度。然后，您会看到$scope.stars属性，以便在值更改时更新您的评分。

请参阅小提琴：http://jsfiddle.net/g7vqb5x9/1/

Answer 2

您永远不应该操纵控制器内的DOM。指令链接是DOM操作的正确位置。

Angular.element已经是一个jQuery对象：

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

BTW：span是一个内联元素，没有高度和宽度。您需要使用块元素或覆盖显示属性。

Plunker

如何在angularjs中集成jQuery函数？

2 个答案: