web-dev-qa-db-ja.com

Angularjsディレクティブはスコープを分離しました+一方向のデータバインディングはオブジェクトに対して機能しませんか？

2つの値を持つカスタムディレクティブを作成しました。 1つ目は構成オブジェクトで、2つ目はデータオブジェクトです。親スコープに反映しているディレクティブ内のこの構成オブジェクトとデータオブジェクトを変更します。ディレクティブを複数回使用する必要がある場合、エラーが発生します。

私は https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/ に従い、分離スコープを使用しています。

分離されたスコープ内のオブジェクトに対して一方向のデータバインディングが必要です。ディレクティブ関数を変更しても、親スコープに反映されるべきではありません。

以下は指令の範囲です。

scope: {
    config: "&config",
    dataObj: "&dataObj"
}

これがディレクティブのリンク機能でアクセスする方法です

var config = scope.config();
var dataObj= scope.dataObj();

ここでは、参照渡しが行われていると想定しています。

JSbinを追加しています。オブジェクトの値が変更され、親スコープに反映されていることをコンソールで確認してください。

https://jsbin.com/vagowe/edit?html,js,output

javascriptangularjsdata-bindingangularjs-directive
11
murli2308

渡すテキストはone-way binding(@)で、渡すオブジェクトはtwo-way binding(=)です。

オブジェクトをテキストとして渡す

<custom-directive config="{{config}}"></custom-directive>

ディレクティブのスコープ

scope: {
  config: "@"
}

文字列をリンク内のオブジェクトに変換し直す

var config = angular.fromJson(scope.config);
19
Pavan Kumar Jorrigala

正解です。問題は、JavaScriptオブジェクトが参照によって渡されていることです。一方向バインディングを使用すると、参照がコピーされますが、参照は引き続き同じオブジェクトを指します。

ディレクティブのAngularドキュメント からの私の印象は常に次のとおりです。

  • '@'バインディングは、補間された文字列を対象としています
  • '='バインディングは、スコープ間で共有する必要がある構造化データを対象としています
  • '＆'バインディングは、親スコープにバインドされている式を繰り返し実行することを目的としています

親からのバインドされたオブジェクトを不変として扱いたい場合は、 angular.copy ：を使用して、リンクコード内のオブジェクトのディープコピーを作成できます。

var config = angular.copy(scope.config());
var dataObj = angular.copy(scope.dataObj());

または、これに双方向バインディングを使用して、同じ方法でオブジェクトをコピーすることもできます。

scope: {
    config: "=",
    dataObj: "="
}

// ...
// Inside the link function of the directive.
// Note that scope.config and scope.dataObj are no longer functions!

var config = angular.copy(scope.config);
var dataObj = angular.copy(scope.dataObj);
6
user4872511

最も簡単なことは、ディレクティブ/コンポーネント内で以下のステートメントを使用することです-

scope.config = angular.copy(scope.config);
0
prithveesingh zankat