angularjs – ng-switch不绑定ng-model

我有这个repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq显示当我点击“标题3”,并在文本框中input一个值,虽然input的值显示反映在用户界面,当我点击“点击”button什么都不是绑定为范围属性$ scope.test。

我不知道ng-switch有什么问题,或者我做错了什么。 帮助表示赞赏!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

由于ng-switch创build自己的作用域,这是一个作用域inheritance问题。

经常提出的一个build议是在模型上总是使用一个dot 。 原因是当控制器作用域项目是对象而不是基元时,子作用域将创build对初始对象的引用。 如果模型是一个原语,它将不会更新原始。

例如:

 <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 : test.value

关于模型中的dot参考(有价值的阅读): https : //github.com/angular/angular.js/wiki/Understanding-Scopes

这是因为你实际上在ng-switch中创build了一个子范围。 因此,属于ngSwitch指令的作用域上存在另一个test属性。 它最初将显示来自其父范围的值,但在编辑它时,由于它是原始的,因此它只会编辑子级上的值,而不是父级。 原型inheritance不在这里发挥作用(但这是我们需要的)。

当你点击button时,button正在提醒/ console.logging父范围的属性…孩子无法更改。

为了解决这个$parent.test$parent.test的ng-model属性中使用$parent.test parent.test:

片段:

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

这是你的抢劫者的叉子,展示它的行动。

我遇到类似的问题,我已经通过在控制器中创build一个范围variables来解决,并在ng-includeng-switch 。 这样,如果你在ng-switch深入嵌套ng-include ,并继续,我们仍然可以直接使用该范围variables。

由于所有的子范围(这里是ng-include / ng-switch )都是从父范围(通常是控制器范围)扩展而来的,所以我们可以在这些子范围内直接访问父范围

使用$parent将需要像$parent.$parent.$parent.someProp

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