AngularJS - ng-switch指令无法绑定ng-model属性

Question

我有一个可复现的问题 http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq，当我点击“Title3”并在文本框中输入值时，尽管UI中反映出输入的值，但当我点击“click”按钮时，没有任何东西被绑定到范围属性$scope.test。

我不知道ng-switch出了什么问题，或者也许我做错了什么。非常感谢帮助!!! http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

- user1791567

Answer 1

由于 ng-switch 创建自己的作用域，导致了作用域继承问题。

经常建议的一个做法是始终在模型上使用 点。原因是当控制器作用域项是对象而不是原始值时，子作用域将会创建对初始对象的引用。如果模型是原始值，它将不会更新原始对象。

例如：

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

$scope.test={value:''}

另一种方法是在HTML模型标记中使用$parent：

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

使用点方法是一个好的实践，可以避免这些问题，因为您不需要考虑更深层嵌套的作用域。

演示使用 test.value 作为模型: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

关于模型中点的参考资料（有价值的阅读）：https://github.com/angular/angular.js/wiki/Understanding-Scopes

- charlietfl

---

这种行为有什么原因吗？我刚刚花了三个小时来尝试解决它，因为我在三天和三个源代码控制版本之前将我的两个相同数据视图的手动显示/隐藏更改为ng-switch，并且一切似乎都正常工作。我有一个选择器，用于设置所选列表中当前字符，并且该字符具有任务列表。一切看起来都很好，但是当我单击任务按钮时，它使用原始父级字符。是否有办法在单击方法中访问子范围（我正在使用executeTask($index)）？ - Jason Goemaat

Answer 2

这是因为您实际上正在 ng-switch 内创建一个子作用域。因此，另一个名为 test 的属性存在于属于 ngSwitch 指令的作用域中。它最初显示其父作用域中的值，但是当您编辑它时，由于它是原始类型，它仅会在子作用域上编辑值，而不会影响父作用域。这里不涉及原型继承（但这正是我们需要的）。

当您单击按钮时，按钮正在警报/控制台记录父作用域上的属性，而子作用域无法更改该属性。

要解决此问题，请在 ngSwitch 中的 ng-model 属性中使用 $parent.test：

代码片段：

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

这里是您的 Plunker 的一个分支，展示了它的运行情况。

- Ben Lesh

Answer 3

我遇到过类似的问题，我通过在控制器中创建一个作用域变量，并将其与ng-include和ng-switch一起使用来解决。这样，如果您在ng-switch中有深度嵌套的ng-include，并且继续嵌套，我们仍然可以直接使用该作用域变量。

由于所有子作用域（这里是ng-include/ng-switch）都扩展自父作用域（通常是控制器作用域），因此我们可以在这些子作用域内直接访问父作用域，而无需任何问题。

使用$parent需要编写类似于$parent.$parent.$parent.someProp的代码。

示例 Plunk：http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview

- manikanta