javascript - 在 ng-repeat 指令中访问 DOM

Question

嗨，我是 AngularJS 的新手，已经开始学习如何构建指令

在我的示例中，我试图访问在我的指令中呈现的 DOM 元素，但我无法访问某些元素，因为它们尚未在我的链接函数中呈现。

如何使用 ng-repeat 和指令访问这些元素？

在我的示例中，我可以获得“p”并更改其颜色，但我无法访问 td 以更改其 css 属性、绑定(bind)事件等

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/

我很感激任何帮助或建议最好的

Answer 1

您不能将它包装在 $timeout 中以在渲染后访问 DOM 吗？

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

    }

检查更新fiddle