angularjs - ng-switch不绑定ng-model

Question

当我点击'Title3‘并在文本框中输入一个值时，虽然输入的值显示在UI中，但当我点击’http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq‘按钮时，范围属性$scope.test没有绑定任何内容。

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

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

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

经常提出的一个建议是始终在模型上使用dot。原因是，当控制器范围项是对象而不是原语时，子范围将创建对初始对象的引用。如果model是一个基元，它将不会更新原始模型。

例如：

<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

Answer 2

这是因为您实际上是在ng-switch内创建子范围。因此，属于ngSwitch指令的作用域上存在另一个test属性。它最初会显示父作用域中的值，但当您编辑它时，因为它是一个基元，所以它只编辑子作用域上的值，而不是父作用域上的值。原型继承在这里不起作用(但这是我们需要的)。

当您单击该按钮时，该按钮将发出警报/控制台。正在记录父作用域上的属性...这是孩子无法改变的。

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

一个片段：

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

And here's a fork of your plunker showing it in action.

Answer 3

我遇到过类似的问题，我已经通过在控制器中创建一个作用域变量并在ng-include和ng-switch中使用它来解决这个问题。这样，如果你已经在ng-switch中深度嵌套了ng-include，而且还在继续，我们仍然可以直接使用那个作用域变量。

由于所有子作用域(这里是ng-include/ng-switch)都是从父作用域(通常是控制器作用域)扩展而来的，因此我们可以在这些子作用域中通过直接访问父作用域。

使用$parent需要像$parent.$parent.$parent.someProp一样编写

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