5

WebアプリケーションにAngularjsを使用しています。私は自分の問題の解決策を見つけるために検索を試みましたが、Angularjsはng-Repeat内で新しく作成されたDOM要素にアクセスする簡単な方法を促進しないようです。

実際の問題を示すためにjsfiddleを用意しました。ここにリンクがあります：http：//jsfiddle.net/ADukg/956/

ng-repeat内で新しいDOM要素を選択する方法を教えてください。

4

2 に答える 2

2

私のコメントを拡張するために、要素のクラスに警告するディレクティブの単純な意味を示すようにフィドルを更新しました。

http://jsfiddle.net/ADukg/994/

元のコメント：

コントローラでのdom操作に関しては、ここではまったく実行しないでくださいと書かれています。ディレクティブに入れる必要があります。コントローラには、ビジネスロジックのみを含める必要があります。

なぜそれが機能しないのか、私にはわかりませんが、おそらくこの時点でAngularがまだ独自のものを実行しているためです。

于 2012-10-07T00:05:36.433 に答える
1

これを行うには2つの方法があります。

1 ng-init

function controller($scope) {
  $scope.items = [{id: 1, name: 'one'}, {id: 2, name: 'two'}];

  $scope.initRepeaterItem(index, item) {
    console.log('new repeater item at index '+index+':', item);
  }
}

<ul>
  <li ng-repeat="item in items" ng-init="initRepeaterItem($index, item)"></li>
</ul>


2 MutationObserver 少し複雑
ですこれは、親が新しい子を取得する要素（<ul>この場合）で、ディレクティブ内で実行します

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // you get notified about DOM mutations here
    // check mutation.type if it was an insertion
    console.log(mutation.target.nodeName, mutation.type, mutation);
  });
});

var config = {childList: true, attributes: false, characterData: false, 
  subtree: false, attributeOldValue: false, characterDataOldValue: false};

observer.observe(element[0], config);

デモ              http://plnkr.co/h6kTtq
ドキュメント     https://developer.mozilla.org/en/docs/Web/API/MutationObserver
ブラウザサポート   http://caniuse.com/mutationobserver
于 2013-12-23T11:43:54.207 に答える