1

リンク関数内から DOM を操作する必要があります。

replace を false に設定すると、DOM にアクセスできることに気付きました ( http://jsfiddle.net/bcsU8/ )

//body of directive
return {
    restrict: 'A',
    replace: false,
    scope: {
        bar: '@myDir'
    },
    template: '<div id="{{bar}}">foo bar is <span>{{bar}}</span></div>',
    link: function(scope, element, attr) {
        scope.$watch('myDir', function(value) {
            console.log('In watch - scope.bar: ', scope.bar);
            console.log('DOM accesible? ', $("#"+scope.bar).length == 1);
        });
    }
};

しかし、それをtrueに設定するとできません( http://jsfiddle.net/PpXgb/ )

return {
    restrict: 'A',
    replace: true,
    scope: {
        bar: '@myDir'
    },
    template: '<div id="{{bar}}">foo bar is <span>{{bar}}</span></div>',
    link: function(scope, element, attr) {
        scope.$watch('myDir', function(value) {
            console.log('In watch - scope.bar: ', scope.bar);
            console.log('DOM accesible? ', $("#"+scope.bar).length == 1);
        });
    }
};

置換がオンのときに DOM にアクセスできないのはなぜですか? これら2つのケースに違いがあるべきであることを示すドキュメントは見つかりませんでした。

リンク機能に関するドキュメントから、リンク プロセス後に DOM が使用可能になるようです: ( http://docs.angularjs.org/guide/directive )

リンク後関数 子要素がリンクされた後に実行されます。ポストリンク関数でDOM変換を行うのは安全です。

私の scope.$watch では、$() を介して要素に直接アクセスするのではなく、DOM が存在することを期待する jQuery プラグインを実際に呼び出していることに注意してください。

4

1 に答える 1

1

linkこの場合の問題は、関数の実行時に要素がまだ DOM にアタッチされていないことです。これは、あなたがやろうとしていることの問題ではありません。element問題は、関数に渡されたオブジェクトではlinkなく jQuery セレクターを介して要素にアクセスしようとすることで、ベスト プラクティスを破っていることです。オブジェクトを使用してみてくださいelement。コードが突然機能することがわかると思います。

ただし、ディレクティブ メソッドの実行順序には注意点があるため、これでもうまくいかない場合もありますが、基本的なディレクティブでそれらに遭遇することはほとんどありません。同様に、AngularJS がディレクティブをどのように扱うかをよりよく理解するには、ディレクティブに関するガイド ページを読む必要があります。

于 2013-03-11T20:35:28.930 に答える