angularjs - ng-switch 不绑定 ng-model答案

【问题标题】：angularjs - ng-switch does not bind ng-modelangularjs - ng-switch 不绑定 ng-model
【发布时间】：2013-03-13 15:57:13
【问题描述】：

我有这个 repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq 当我单击“Title3”并在文本框中输入一个值时显示，尽管输入的值显示在 UI 中，但当我单击“单击”按钮时，范围属性没有绑定任何内容$scope.test.

我不知道 ng-switch 有什么问题，或者我做错了什么。感谢您的帮助！！！

【问题讨论】：

【解决方案1】：

这是一个范围继承问题，因为ng-switch 创建了自己的范围。

经常提出的一个建议是始终在模型上使用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 方法是避免这些问题的好方法，因为您无需考虑更深层次的嵌套范围。

【讨论】：

这种行为有什么原因吗？我只花了三个小时试图弄清楚，因为我在 3 天前将手动显示/隐藏相同数据的两个视图更改为 ng-switch 和 3 个源代码控制修订版，一切似乎都运行良好。我有一个选择，它为列表中选择的内容设置当前角色，并且该角色有一个任务列表。一切看起来都找到了，但是当我单击任务上的按钮时，它使用的是原始父角色。有什么方法可以在点击方法中访问子范围（我正在使用 executeTask($index)）？

【解决方案2】：

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

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

使用$parent 需要像$parent.$parent.$parent.someProp 这样写

【讨论】：

【解决方案3】：

这是因为您实际上是在 ng-switch 内部创建了一个子作用域。所以另一个 test 属性存在于属于 ngSwitch 指令的范围内。它最初会显示来自它的父范围的值，但是当你编辑它时，因为它是一个原语，它只编辑子级的值，而不是父级的值。原型继承在这里没有发挥作用（但这正是我们所需要的）。

当您单击按钮时，按钮会发出警报/控制台。记录父范围上的属性...子级无法更改。

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

一个sn-p：

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

【讨论】：