7

Angular の世界と非 Angular の世界の間の相互作用を理解しようとしています。

次のように宣言するディレクティブがあるとします。

<dir1 id="d1" attr1="100"/>

angular 外のコードがディレクティブを次のように変更する場合:

$("#d1").attr("attr1", 1000);

ディレクティブは、その属性の 1 つが変更されたことをどのように知ることができますか?

4

2 に答える 2

8

代わりに、この変更をディレクティブ内で行うのが最善です。何らかの理由でそれが不可能な場合は、いくつかのオプションがあります。

アプリの外部で、アプリ内の任意の DOM 要素への参照を取得します。その参照を使用して、そのスコープへの参照を取得できます。要素を id で使用できますd1。例えば：

var domElement = document.getElementById('d1');
var scope = angular.element(domElement).scope();

以下にいくつかのオプションを示します。

オプション1

ビューを直接変更するのではなく、モデルを変更します。リンク関数で、次のようなスコープ変数に初期属性値を格納します。

scope.myvalue = attrs.attr1;

次に、次のように (上記のスコープへの参照を使用して) アプリの外部で値を変更できます。

scope.$apply(function(){
    scope.myvalue = 1000;
    console.log('attribute changed');
});

ここにフィドルがあります

オプション 2

$observeビューが jQuery で直接操作される場合、機能する属性への、 、または分離スコープ バインディングの使用についてはわかりません。$watchこれらはすべて、属性式自体に一度だけバインドされるためです。ファーストラン。値を変更すると、これらのバインディングが失敗します。したがって$watch、DOM要素自体の属性が必要になります（ ではなくattrs）：

scope.$watch(function(){         
    return $(el).attr('attr1');    // Set a watch on the actual DOM value
}, function(newVal){
    scope.message = newVal;
});

次に、次のように (上記のスコープへの参照を使用して) アプリの外部で値を変更できます。

scope.$apply(function(){
    $("#d1").attr("attr1",1000);
});

ここにフィドルがあります

于 2013-06-18T02:43:23.853 に答える