在这个plnkr中,在 src 内部检测到编辑的值,但是 src 外部的值保持空白。
在 plnkr 中选择不同的单选按钮,外部 src 不会更新。
我可以知道为什么以及如何解决这个问题吗?
ng-model
这是 an中不包含 a的典型示例.
。
这是解决问题的相关plunker。
app.controller('testCtrl',function($scope,$timeout){
$scope.data = {
filteringText : ''
};
});
发生这种情况是因为 ng-include 创建了一个新范围,并且由于原型在 javascript 中的工作方式,子原型中的原始值会覆盖父原型中的原始值。如果在原型继承方面不清楚,请阅读本文。
PS:使用$parent
不是一个好的设计。它将视图与逻辑紧密结合。
这是因为 ng-include 正在创建自己的范围,而您使用单选按钮分配的 ng-model 值仅限于该范围。
因此,您在主体中的 {{ filteringText }} 不知道过滤文本是使用 ng-model 设置的。
如果我们将您的 ng-include 的内容转移到正文中,如下所示:
<body ng-controller="testCtrl">
<div ng-include src="'input.html'"></div>
<input type="radio" ng-model="filteringText" value="">All
<input type="radio" ng-model="filteringText" value="Add">Add
<input type="radio" ng-model="filteringText" value="Edit">Edit
<input type="radio" ng-model="filteringText" value="Delete">Delete
</br>
Outside src : {{filteringText}}
然后我们看到外部 src 更新了,正如我们所期望的那样,使用 ng-model 值。
如果我们想从 ng-include 更新主应用范围内的值,我们可以在 input.html 文件中使用 $parent.value,如下所示:
<input type="radio" ng-model="$parent.filteringText" value="">All
<input type="radio" ng-model="$parent.filteringText" value="Add">Add
<input type="radio" ng-model="$parent.filteringText" value="Edit">Edit
<input type="radio" ng-model="$parent.filteringText" value="Delete">Delete
<br/>
Inside src : {{$parent.filteringText}}