0

私はバニラ AngularJS v1.4.5 (jQuery なし) を使用しており、カスタム ディレクティブでコンパイル時に祖父母要素に属性を追加したいと考えています。

compile 関数では、twoメソッドを使用して祖父母要素を取得し、parent()メソッドを使用して属性を追加することで、これを実現できます。ただし、親要素にngIfディレクティブがある場合、祖父母要素は属性を取得しません。elementattr()

angular.module('myApp', [])
    .directive('foo', fooDirective)
;

function fooDirective() {
    return {
        compile : compile,
        priority: 601 // ngIf is 600
    };

    function compile(element, attrs) {
        var parent, grandparent;

        parent = element.parent();            
        grandparent = parent.parent();

        parent.attr('foo', 'bar');
        grandparent.attr('foo', 'bar');
    }
}

JSFiddle

私が知っていることは次のとおりです。

  • 親要素で が使用されていない場合ngIf、属性は祖父母に追加されます。
  • この問題はscope、スコープが要素にリンクされる前のコンパイル段階で発生しているため、 に関連するものではありません。
  • 私のコンパイル機能ngIfは、の優先度を持つ600（およびコンパイル機能を持​​たない）の前に実行する必要があります。
  • ngIfDOM 内の要素を (その子要素と共に) 完全に削除して再作成しますが、祖父母要素に影響を与えたり、その属性を変更したりしてはなりません。

親要素にディレクティブがある場合、ディレクティブの祖父母要素に属性を追加できない理由を誰かに説明できますngIfか?

4

2 に答える 2

0

なぜこれが起こっているのかはまだ完全にはわかりませんが、コンパイルでこれを行っている特定の理由はありますか? リンクを使用するようにディレクティブを調整しましたが、うまく機能しているように見えました。

(function () {
    'use strict';

    angular.module('myApp', [])
        .directive('foo', fooDirective)
    ;

    function fooDirective() {
        return {
            link : link,
            priority: 601 // ngIf is 600
        };

        function link($scope, element, attrs) {
            var parent, grandparent;

            parent = element.parent();            
            grandparent = parent.parent();           
            parent.attr('foo', 'bar');
            grandparent.attr('foo', 'bar');
        }
    }

})();

編集：@NewDevが言ったように、通常、コンパイル時ではなくリンクフェーズでDOM操作を行う必要があります。

于 2015-09-16T23:40:04.080 に答える