angularjs - AngularJS ウォッチ DOM の変更

Question

auto-carouselリンクされた要素のchildrenを反復処理する1 つのディレクティブがあります。

ng-ifただし、子はs 式がまだ解析されていないため、まだ DOM にロードされていません。

DOM ツリーに変更があったことを親ディレクティブが認識していることを確認するにはどうすればよいですか?

        <ul class="unstyled" auto-carousel>
          <li class="slide" ng-if="name">{{name}}</li>
          ...
          <li class="slide" ng-if="email">{{email}}</li>
        </ul>

使用でき$timeoutましたが、信頼性が低いと感じています。ng-show代わりに使用することもできますng-ifが、それは質問に答えず、必要なものではありません。

score 74 · Accepted Answer

だからここに私がやったことがあります：

に関数を渡すことができることを発見しました$scope.$watch。そこから、変更を監視したい式の値を返すのは非常に簡単です。スコープのプロパティにキー文字列を渡すのとまったく同じように機能します。

link: function ($scope, $el, $attrs) {
  $scope.$watch(
    function () { return $el[0].childNodes.length; },
    function (newValue, oldValue) {
      if (newValue !== oldValue) {
        // code goes here
      }
    }
  );
}

リストにはテキストノードとコメントだけでなく要素も含まれているため、childNodesではなくを監視しています。Angular は、要素のみを保持しながらトランスクルージョンを実行して DOM を変更する、、などのディレクティブにコメントプレースホルダーを使用するため、これは貴重です。childrenchildNodesng-repeatng-ifng-switchng-includechildren

score 18 · Accepted Answer

要素の dom のより深い部分の変更を監視する必要がある場合は、MutationObserver が最適です。

.directive('myDirective', function() {
    return {
        ...
        link: function(scope, element, attrs) {
            var observer = new MutationObserver(function(mutations) {
                // your code here ...
            });
            observer.observe(element[0], {
                childList: true,
                subtree: true
            });
        }
    };
});

score 5 · Accepted Answer

このangular-dom-eventsのディレクティブモジュールを作成しました

あなたの場合、あなたはできる

    <ul class="unstyled" auto-carousel>
      <li class="slide" ng-if="name" dom-on-create="nameCreated()">{{name}}</li>
      <li class="slide" ng-if="email" dom-on-destroy="emailDestroyed()">{{email}}</li>
    </ul>

現在は and のみをサポートしdom-on-createてdom-on-destroyいますが、 $watch コールバックを繰り返しチェックするのではなく、dom イベントごとに 1 回だけ起動するため、受け入れられた回答よりも優れたパフォーマンスを発揮します。

score 2 · Accepted Answer

angularの推奨事項ではないと思いますが、要素の初期化時に起動する ng-init を使用できます。

<ul class="unstyled" auto-carousel>
    <li class="slide" ng-if="name" ng-init="recheck()">{{name}}</li>
    <li class="slide" ng-if="email" ng-init="recheck()">{{email}}</li>
</ul>

score 0 · Accepted Answer

リンク関数内で最初にディレクティブの内容をコンパイルしようとすることができます。例えば：

angular.module('myApp').directive('autoCarousel', ['$compile', function ($compile) {

    return {
        templateUrl: 'views/auto-carousel.html',
        restrict: 'A',
        replace: true,
        link: function (scope, element, attr) {
            $compile(element.contents())(scope);

            // your code goes here
        }
    }
}]);

angularjs - AngularJS ウォッチ DOM の変更

5 に答える 5

Related

Reference