Angularjs - 如何将函数分配给指令中的嵌套元素

Question

我是angularjs的新手，我无法解决这个问题。

指令

app.directive('rating', [function () {
return {
    restrict: 'E',
    scope: {
        maxStars: '=',

    },


    link: function (scope, iElement, iAttrs) {
            scope.stars = [];
            for(var i=0;i<scope.maxStars;i++) {
                scope.stars.push(i);
            }

            iElement.bind('mouseenter', function(event) {

                scope.$apply(function(){
                    angular.forEach(iElement.children(),function(div){
                        angular.forEach(div.children,function(span){
                          span.addClass('rating-star-enabled'); //error addClass is not a function
                        });
                    });
                });
            });

    },
    templateUrl:'rating/rating.html'
};
}]);

指令模板

<div class="review-star">

   <span class="glyphicon glyphicon-record" ng-repeat="star in stars"></span>

</div>

指令

<rating max-stars="5"></rating>

我得到错误addClass不是函数。它不仅仅适用于addClass，如果我尝试任何其他功能，它会显示相同的错误。如果我在控制台中记录它我可以看到它打印所有标签。所以它正确地访问元素。我做错了什么？

Answer 1

当你angular.forEach()超过iElement.children()时，你正在迭代一系列原始DOM元素（这就是为什么你需要在div.children而不是div.children()中使用angular.forEach()内在span）。您需要先将addClass()（也是原始DOM元素）转换为jqLit​​e对象，然后才能调用scope.$apply(function(){ angular.forEach(iElement.children(),function(div){ angular.forEach(div.children,function(span){ angular.element(span).addClass('rating-star-enabled'); }); }); }); ...

{{1}}

Answer 2

你试过这个吗？

angular.forEach(div.children,function(span){

    var a = angular.element(span);                      
    a.addClass('rating-star-enabled'); //error addClass is not a function

});