Angularjs - how to assign functions to nested elements in a directive

Question

I am new to angularjs and i am not able to figure this issue.

Directive

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'
};
}]);

Directive template

<div class="review-star">

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

</div>

Directive

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

and i get the error addClass is not function. Its not just for addClass, if i try any other function it shows same error. if i log it in console i can see it prints all tags. So its accessing the elements properly. What am i doing wrong?

Anthony Chu · Accepted Answer · 2014-07-19 05:43:41Z

1

When you angular.forEach() over iElement.children(), you're iterating over an array of raw DOM elements (which is why you need to use div.children instead of div.children() in the inner angular.forEach()). You need to turn span (also a raw DOM element) into a jqLite object before you can call addClass()...

scope.$apply(function(){
    angular.forEach(iElement.children(),function(div){
        angular.forEach(div.children,function(span){
          angular.element(span).addClass('rating-star-enabled');
        });
    });
});

answered Jul 19, 2014 at 5:43

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gerben Rampaart · Accepted Answer · 2014-07-19 05:43:54Z

1

Have you tried this?

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

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

});

answered Jul 19, 2014 at 5:43

Gerben Rampaart

9,9653 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angularjs - how to assign functions to nested elements in a directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest