47

この再現http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrqを使用すると、「Title3」をクリックしてテキストボックスに値を入力すると表示されますが、入力した値はUIに反映されますが、「クリック」ボタンをクリックすると何も表示されません。スコープ属性$scope.testにバインドされています。

ng-switchの何が問題なのかわからないか、何か問題が発生している可能性があります。ヘルプをいただければ幸いです!!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

4

3 に答える 3

89

ng-switchこれは、独自のスコープを作成するためのスコープ継承の問題です。

よく行われる推奨事項の1つは、常にdotモデルでを使用することです。その理由は、コントローラースコープアイテムがプリミティブではなくオブジェクトである場合、サブスコープが初期オブジェクトへの参照を作成するためです。モデルがプリミティブの場合、元のモデルは更新されません。

例えば:

<input ng-model="test.value" placeholder="pre" type="text" />
$scope.test={value:''}

別のアプローチは$parent、htmlモデルのマークアップで使用することです。

<input ng-model="$parent.test" placeholder="pre" type="text" />

dotより深いネストされたスコープについて考える必要がないため、これらの問題を回避するには、方法論を使用することをお勧めします。

test.valueモデルとして 使用するデモ:http: //plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p = Preview

モデル内に関するリファレンスdot(貴重な読み物):https ://github.com/angular/angular.js/wiki/Understanding-Scopes

于 2013-03-24T00:21:00.183 に答える
10

これは、実際にはng-switch内に子スコープを作成しているためです。testそのため、ngSwitchディレクティブに属するスコープに別のプロパティが存在します。最初は親スコープの値が表示されますが、編集すると、プリミティブであるため、親ではなく子の値のみが編集されます。ここでは、典型的な継承は機能しません(ただし、それが必要です)。

ボタンをクリックすると、ボタンはアラート/コンソールになります。親スコープのプロパティをログに記録します...子は変更できません。

$parent.testngSwitchのng-model属性でこの使用を修正するには、次のようにします。

スニペット:

<span class="pew"  ng-switch-when="title2">
  <input ng-model="$parent.test" placeholder="pre" type="text" />
  {{test}}
</span>

そして、これがあなたのプランカーのフォークで、実際に動作しているところを示しています。

于 2013-03-24T00:18:47.063 に答える
4

同様の問題が発生しました。コントローラーでスコープ変数を作成し、それをinng-includeとで使用することで解決しましたng-switch。このようng-includeに、inng-switchを深くネストして続行しても、そのスコープ変数を直接使用できます。

すべての子スコープ(ここではng-include/ ng-switch)は親スコープ(通常はコントローラースコープ)から拡張されているため、これらの子スコープ内から直接親スコープに問題なくアクセスできます。

使用$parentするには、次のように書く必要があります$parent.$parent.$parent.someProp

プランクの例:http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p = Preview

于 2013-05-08T05:50:22.827 に答える