この再現http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrqを使用すると、「Title3」をクリックしてテキストボックスに値を入力すると表示されますが、入力した値はUIに反映されますが、「クリック」ボタンをクリックすると何も表示されません。スコープ属性$scope.testにバインドされています。
ng-switchの何が問題なのかわからないか、何か問題が発生している可能性があります。ヘルプをいただければ幸いです!!!
この再現http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrqを使用すると、「Title3」をクリックしてテキストボックスに値を入力すると表示されますが、入力した値はUIに反映されますが、「クリック」ボタンをクリックすると何も表示されません。スコープ属性$scope.testにバインドされています。
ng-switchの何が問題なのかわからないか、何か問題が発生している可能性があります。ヘルプをいただければ幸いです!!!
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
これは、実際にはng-switch内に子スコープを作成しているためです。test
そのため、ngSwitchディレクティブに属するスコープに別のプロパティが存在します。最初は親スコープの値が表示されますが、編集すると、プリミティブであるため、親ではなく子の値のみが編集されます。ここでは、典型的な継承は機能しません(ただし、それが必要です)。
ボタンをクリックすると、ボタンはアラート/コンソールになります。親スコープのプロパティをログに記録します...子は変更できません。
$parent.test
ngSwitchのng-model属性でこの使用を修正するには、次のようにします。
スニペット:
<span class="pew" ng-switch-when="title2">
<input ng-model="$parent.test" placeholder="pre" type="text" />
{{test}}
</span>
同様の問題が発生しました。コントローラーでスコープ変数を作成し、それをinng-include
とで使用することで解決しましたng-switch
。このようng-include
に、inng-switch
を深くネストして続行しても、そのスコープ変数を直接使用できます。
すべての子スコープ(ここではng-include
/ ng-switch
)は親スコープ(通常はコントローラースコープ)から拡張されているため、これらの子スコープ内から直接親スコープに問題なくアクセスできます。
使用$parent
するには、次のように書く必要があります$parent.$parent.$parent.someProp
プランクの例:http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p = Preview