Question

55

Loop through the children of an element in a AngularJS directive

rated 0 times [ 56] [ 1] / answers: 1 / hits: 17212 / 9 Years ago, thu, february 26, 2015, 12:00:00

I have a problem - I've forgotten how to code! I have an angularJS directive that is on a parent wrapper tag (a DIV) and in my directive I wish to loop through the children (first Child DIVs). I have the following

<div data-check-attributes>

  <div data-ng-repeat=user in Users data-id={{ user.ID }} data-ng-click=doSomething(user.ID) data-new={{ user.newUser }} class=>

    <div> {{ user.userName }} </div>

    <div> {{ user.userAge }} </div>

  </div>

</div>

Now in my directive I wish to loop through the first child divs (there could be many of these, but I am seeing 10 users in my loaded view) and perform certain checks and modifications in my directive, using the data attributes, the $location object and potentially many more... however I can't remember how to loop through the first child divs, I seem to get errors with everything I tried... so far I have this, which doesn't work! In the example below I just want to write the data-id of the first child nodes to the console

.directive('checkAttributes', function ($location) {

        return{

            restrict: 'A',

            link: function (scope, element) {



            // will use $location later



                console.log(angular.element(element)[0]);  // this outputs the HTML

                console.log(angular.element(element)[0].children().length); // this errors, TypeError: object is not a function



                for (var i = 0; i < angular.element(element)[0].children.length; i++) {

                    console.log(angular.element(element)[0].children[i].getAttribute('data-id'));

                }



            }

        };

    });

I'm confused... please help!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

answered 9 Years ago madelyn · Accepted Answer

If you are trying to access children property of the HTMLElement then you should read it like property.

Another thing is that element is already an instance of angular.element so no need to wrap it again:

console.log(element[0]);  // DOM element

console.log(element[0].children.length);

However there is a set of convenience methods angular.element object provides. Those methods replicate some of the jQuery's methods, including $.fn.children method. In this case alternatively you can do

console.log(element);  // angular.element instance

console.log(element.children().length);

And finally, there is one more caveat: ngRepeat will render its elements after your custom directive, so you can't access children collection yet. Simplest fix is to wrap your code into $timeout service, which will execute your logic in the next digest cycle, guaranteed after ngRepeat is complete:

app.directive('checkAttributes', function($location, $timeout) {

    return {

        restrict: 'A',

        link: function(scope, element) {



            // will use $location later

            $timeout(function() {

                for (var i = 0; i < element[0].children.length; i++) {

                    console.log(element[0].children[i].getAttribute('data-id'));

                }

            });



        }

    };

});

Demo: http://plnkr.co/edit/oEOSY2e2E0mmLDQOHbff?p=preview