AngularJSでng-repeatしている要素のDOMプロパティにアクセスしたい

Question

いつもお世話になっております。

AngularJS ver1.6.2を使用してアプリケーションを開発しています。

今、ng-repeatを使用してカレンダー表示を作っています。
また、カレンダーの日付を押すと画面上のその日付の場所に応じてポップアップの位置を調整しようと思っています。

今回は、ng-repeatで生成された要素ごとにポップアップの表示位置を変更するため、ng-styleを使用してcontroller側で計算した値を返そうと思っています。
以下のようなイメージです。

<td ng-repeat="d in days">
  <span>{{d}}</span>
  <div class="popup" ng-style="setStyle()">ポップアップ</div>
</td>

// controller内
$scope.setStyle(function(){
  // 引数にdomにアクセエス出来るデータを取得
  //ここでdomのプロパティからポップアップの場所を計算
  const t = 999; // 計算したtopからの座標
  const l = 999; // 計算したleftからの座標
  return {
    top: t,
    left: l
  }
})

このようにcontrollerで定義した関数からng-styleにhashを返して動的にstyleを変えたいと思っています。

この場合、setStyleの引数にどうにかしてdomの情報にアクセスできるものを渡さないといけないのではと思っています。

この場合どのようにしてsetStyleにdomの情報を渡すことが出来るのでしょうか。

ご教授よろしくお願いいたします。

Answer 1

色々とやり方はあるとは思うのですが、例えば「d」オブジェクトのプロパティをdiv要素のidにして、それをsetStyleに渡し、そのidからDOMを取得してはいかがでしょう？
idでなくても、daysは日付でしょうから1～31ぐらいの日付を識別するための何かを保持しているでしょうし、それをidにするなど。$indexも上手く使えるかもしれません。

<td ng-repeat="d in days">
  <span>{{d}}</span>
  <div id={{d.id}} class="popup" ng-style="setStyle(d.id)">ポップアップ</div>
</td>

// controller内
$scope.setStyle(function(id){


  document.getElementById(id);// 引数にdomにアクセエス出来るデータを取得
  return {
    //頑張って計算した結果を返却
  }
})

Comments

[MasakazuFukami]

ご回答ありがとうございます！！！！

なるほど！
完全にこの方法でいけますね！！！
非常に参考になりました！

[akabee]

すみません、書き込んでから気付いて修正しようとしていたのですが、このコードだとgetElementById(id)が行われたタイミングでまだDOMがなく、エラーになる可能性があります。安易に回答してしまい、すみません。
ただng-repeatの要素のDOM取得自体はこんな感じでいけると思います。
個人的に、表示位置関連で同様のことをしたときはクリックされたタイミングでクリックされたDOMのidを取得しグローバル変数に格納するようなDirectiiveを作成し、スクロールが発生する直前のイベント処理でそのidを受け取って、そのidから表示すべき位置を計算してしかるべき表示を行うというようなことをしました。
なぜそんな面倒なことをするかというと、画面がスクロールするため表示位置を絶対位置で求めることができず、常にクリックされたタイミングでのDOMの現在位置を把握したうえで位置の計算を行う必要があったからです。
画面が固定表示されているのであれば、そこまで面倒ではないかもしれません。
参考になれば・・。