我不知道ng-switch出了什么问题,或者也许我做错了什么。非常感谢帮助!!! http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq
由于 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
这是因为您实际上正在 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>
我遇到过类似的问题,我通过在控制器中创建一个作用域变量,并将其与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