アクセスDOM

Question

こんにちは、私はAngularJSで新たなんだと私は私のディレクティブ内でレンダリングされたDOM要素にアクセスしようとしているどのように私のサンプルではディレクティブに

を構築することを学ぶために始めているが、リンク機能でまだレンダリングされていないため、一部の要素にアクセスできません。

ng-repeatとディレクティブを使用してこれらの要素にどのようにアクセスできますか？私のサンプルで

、私は「P」を取得し、その色を変更するが、私は変更のためのTDのにそのCSSプロパティにアクセスすることはできません、イベントをバインドすることができますが、その他

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/

私は任意のヘルプや提案をaprecciate最高

Answer 1

レンダリング後にDOMにアクセスするには$ timeoutの中でラップできませんか？

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