web-dev-qa-db-ja.com

angularjs-ng-switchはng-modelをバインドしません

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

Ng-switchの何が問題なのかわからない、または何か間違っているのかもしれません。ヘルプは大歓迎です!!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

angularjsng-switch
46
user1791567

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

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

例えば：

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

$scope.test={value:''}

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

<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

87
charlietfl

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

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

これを修正するには、$parent.test ngSwitchのng-model属性で：

スニペット：

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

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

10
Ben Lesh

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

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

$parentを使用するには、$parent.$parent.$parent.somePropのように記述する必要があります。

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

4
manikanta