CODEWITHSUNDEEP
javascriptangularjs
Arun
Arun

Reputation: 1528

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

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?

Upvotes: 0

Views: 228

Answers (2)

Gerben Rampaart
Gerben Rampaart

Reputation: 9945

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

});

Upvotes: 1

Anthony Chu
Anthony Chu

Reputation: 37530

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

Upvotes: 1

Related Questions