Access DOM inside ng-repeat directive

Question

Hi I'm new in AngularJS and have started to learn how to build directives

In my sample I'm trying to access to DOM elements that was rendered inside my directive, but I can't access some elements because they have not been rendered yet in my link function.

How I can access to those elements using ng-repeat and directives?

In my sample, I can get the "p" and change its color but I cannot access to td's for change its css properties, bind events, etc

HTML

<div ng-app="app">
    <div ng-controller="myController as myCtrl">        
        <my-table list="myCtrl.list"></my-table>
    </div>
</div>

JS

// Main module
(function() {
    var app = angular.module("app", []);
}());

// Controller
(function() {
    angular.module("app")
        .controller("myController", myController);

    function myController() {
        var vm = this;
        vm.list = [
            { id: 1, name: "Alan" },
            { id: 2, name: "Jasmine" }
        ];
    }
}());

// Directive
(function() {
    angular.module("app")
        .directive("myTable", myTable);

    function myTable() {
        var directive = {
            link: link,
            replace: true,
            restrict: "E",
            scope: {
                list: "="
            },
            template: "<div>" +
                          "<p>My Table</p>" +
                          "<table>" +
                              "<tr ng-repeat='item in list'>" +
                                 "<td>{{item.id}}</td>" +
                                 "<td>{{item.name}}</td>" +
                              "</tr>" +
                          "</table>" +
                      "</div>"
        };

        function link(scope, element, attrs) {
            // "p" element is accesible and we can change the color
            var p = element[0].querySelector("p");
            angular.element(p).css("color",  "red");

            // CANNOT FIND TR'S, the element tag contains <!-- ngRepeat: item in list -->
            var trs = element[0].querySelector("tr");
            // ????????????????
        }

        return directive;
    }
}());

https://jsfiddle.net/hkhvq1hn/

I aprecciate any help or suggestion Best

ng-repeat will get executed after execution of link. can't you handle this part of template? — Ananthaprakash, Apr 06 '16 at 18:25
`ng-repeat` isn't finish when you are in link function, you need to wait till complete rendering DOM for collection of object, take a look at [this answer](http://stackoverflow.com/questions/18156122/angularjs-ng-repeat-start-and-ng-repeat-end-with-inner-ng-repeat).. or if you are only interested to apply styling over DOM then I'd suggest you to use `ng-class` directive.. — Pankaj Parkar, Apr 06 '16 at 18:29
@mcgraphix I'm doing just a sample to learn, it occurred to me that I can display different color of TR based on a property like rating or anything else (not existing in the sample) but as Pankaj Parkar says sounds good idea use ng-class for do that. — mmuniz, Apr 06 '16 at 18:42
If you're doing DOM manipulations inside Angular, you're often doing something wrong. http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/ — lgaud, Apr 06 '16 at 19:23

score 0 · Answer 1 · answered Apr 06 '16 at 18:38

Can't you just wrap it inside $timeout to access the DOM after rendering it?

function link(scope, element, attrs) {
            // "p" element is accesible and we can change the color
            var p = element[0].querySelector("p");
            angular.element(p).css("color",  "red");

            // Wrap selector inside $timeout to access DOM after rendering it -->
            $timeout(function(){
                var trs = element[0].querySelector("tr");
                console.log(trs); 
            });

    }

Check updated fiddle

Access DOM inside ng-repeat directive

1 Answers1