angularjs - 交换机不模型绑定(angularjs - ng-switch does n

2019-07-22 23:27发布

我有这个摄制http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq ,显示当我点击“TITLE3”并在文本框中输入一个值,虽然输入值显示体现在UI,当我点击“点击”按钮,没有什么是对于绑定scope属性$ scope.test。

我不知道什么是错的NG-开关或者也许我做错了什么。 帮助表示赞赏!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1:

这是一个范围的继承问题,由于ng-switch创立了自己的范围。

经常提出了一项建议是始终使用一个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



Answer 2:

这是因为你实际上创建NG-开关内部的子范围。 所以另一个test性能上存在属于ngSwitch指令一个范围。 它最初将显示值从它的父范围,但是当你编辑它,因为它是一种原始的,它只是编辑的孩子,不是父值。 原型继承不来这里发挥作用(但是这就是我们需要的)。

当您单击按钮按钮报警/ console.logging父范围......这孩子不能更改属性。

为了解决这个问题使用$parent.test在你ngSwitch您的NG-模型属性:

一个片段:

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

这里是你的plunker的显示在用行动表明一个叉。



Answer 3:

我遇到类似的问题,我已经通过在控制器创建一个范围变量解决,使用了与ng-includeng-switch 。 如果你已经这样深嵌套ng-include的与ng-switch和它的推移,我们仍然可以直接使用该范围的变量。

由于所有子范围(这里, ng-include / ng-switch )从父范围(一般地,控制器范围)延伸,我们可以从在这些子作用域直接访问父范围没有问题。

使用$parent需要写出像$parent.$parent.$parent.someProp

例如普拉克: http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview



文章来源: angularjs - ng-switch does not bind ng-model