angularjs - AngularJS: 要素に ngModel とローカル スコープのディレクティブがある場合、双方向のデータ バインディングが失敗する

Question

問題はここに示されています: http://jsfiddle.net/ews7S/

<input type="text" ng-model="testModel" dir="123">

要素がコントローラー スコープ内のモデルにバインドされ、独自のローカル スコープを持つ要素にディレクティブも追加すると、モデルへの変更はディレクティブ スコープ内でのみ変更されます。

Answer 1

別の解決策は、モデルにプリミティブではなくオブジェクトを使用することです。次に、新しいディレクティブ スコープは、プリミティブの値のコピーではなく、オブジェクトへの参照を (プロトタイプとして) 継承します。

$scope.model = { testProp: "444" };

<input type="text" ng-model="model.testProp" dir="123">
<input type="text" ng-model="model.testProp">

document.getElementById("out").innerHTML = scope.model.testProp;

http://jsfiddle.net/mrajcok/awfU5/

$scope.testModel などのプリミティブを使用すると、ディレクティブ スコープの testModel プロパティは、親スコープの testModel の値のコピーを取得します。一方を変更しても他方には影響しません。

$scope.model などのオブジェクトでは、親スコープとディレクティブ スコープの両方が同じ (1 つの) オブジェクトへの参照を持ちます。いずれかの変更は、同じオブジェクトに影響します。

別の（壊れやすい）解決策は、文書化されていない$parent プロパティを使用することです（質問のフィドルにこれらの変更を加えます）：

<input type="text" ng-model="$parent.testModel" dir="123">

document.getElementById("out").innerHTML = scope.$parent.testModel;

の使用はDOM 構造に依存するため、 using$parentは脆弱なソリューションであることに注意してください。$parentたとえば、親と子 (現在は孫) の間に別のコントローラーが (ユーザーによって明示的に、または別の Angular ディレクティブによって暗黙的に) 追加された場合、 を使用する必要があります$parent.$parent.testModel。

Answer 2

解決策は、これをディレクティブに追加することです。

scope: {testModel: '=ngModel'},

ここを参照してください： http://jsfiddle.net/ews7S/1/

これが機能する理由は、'=' がローカル スコープ プロパティと親スコープ プロパティの間の双方向バインディングを設定するためです (ドキュメントを参照してください: http://docs.angularjs.org/guide/directiveディレクティブ定義オブジェクトの下)。