AngularJS：ディレクティブから生成されたデータにアクセスする方法は？

Question

私は何ヶ月もAngularJSで働いています。今日は、修正ヘッダをテーブルに追加するのに役立つ指令を作成する必要があります。私が見つけたすべてのディレクティブは、列のサイズを処理する方法のために十分ではありませんでした（私はまだ命題のために開かれています）。

jQueryで作成された「古い」関数を使用していますが、これをディレクティブに変換しようとしています。目標は、表（または表のヘッダー）をクローンし、隠れ/表示機能とその良好な結果を得るための位置を扱うことです。

私の問題：私はそのようなもので、私のディレクティブで<th>要素を取得しようとしている

<table> 
     <thead> 
      <tr> 
        <th></th> // true th elements, used for styling my table 
        <th></th> 
        <th class='text-center' ng-repeat="thing in things"> 
         {{thing.label}} 
        </th> 
      </tr> 
     </thead> 
     <tbody> 
      // my tbody 
    </tbody> 
</table> 

：私のテーブルのヘッダが生成された列と動的である

angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) { 
     console.log(thElem) 
     // do stuff here 
    } 
}); 

をしかし、私はちょうど私のコードの "真の"要素である最初の2つの<th>を取得します。 ng-repeatによって生成される他のすべては無視されます。または私の指示に注入されません。

私はtransclude属性を見てきましたが、動作するものは見つかりませんでした。ある精度で私を助けることができますか？

編集：ここに私の指示の始まりです：

myApp.directive('fixMe', function ($window) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      angular.forEach(element.querySelectorAll('th'), function (thElem, i) { 
      console.log(thElem); 
      var columnWidth = thElem.offsetWidth; 
      thElem.style.width = columnWidth + 'px'; 
     }); 

     } 
    }; 
}) 

Answer 1

ご使用NGリピートするので、あなたは一意のIDを追加し、要素を取得するためにバニラのJSを使用することができます。

あなたが何をしたいかによって、クリック時の変更を処理したい場合は、ng-clickを使用して関数を使用して要素を取得することもできます。ng-click = " doSomething（$ event） "となります。

<table> 
     <thead> 
      <tr> 
        <th></th> // true th elements, used for styling my table 
        <th></th> 
        <th class='text-center' ng-repeat="thing in things track by $index" id="th_{{thing.id}}"> 
         {{thing.label}} 
        </th> 
      </tr> 
     </thead> 
     <tbody> 
      // my tbody 
    </tbody> 
</table> 

angular.forEach(things, function (thing) { 
     var theElm = document.getElementById('th_'+thing.id); 
     console.log(thElem) 
     // do stuff here 
    } 
}); 

Answer 2

は、私はまだわからないので、これはあなたが望むものであるならば、ここに野生の推測を取るつもりですが、要素の任意の集合を得るために、あなたはトランスクルー使用できます。

を

var myApp = angular.module('myApp',[]); 

myApp.directive('tableCollector', function() { 
    return { 
    restrict: "A", 
    transclude: true, 
    link: function(scope, element, attrs, ctrl, $transclude) { 
     $transclude(scope, function(clone){ 
      ... // do something with the element collection 
     }); 
    } 
    } 
}); 

Demo（コンソールログをチェックし、動的に<th>要素はtr.scope.cellsオブジェクトに含まれる）