AngularJS View 不更新我们的 src

在此 plnkr 中，在 src 内部检测到编辑的值，但 src 外部的值仍为空。

在 plnkr 中选择不同的单选按钮，外部 src 不会更新。

我可以知道为什么以及如何解决这个问题吗？

这是ng-model不包含.的典型示例。

这是解决问题的相关 plunker。

普伦克

app.controller('testCtrl',function($scope,$timeout){
  $scope.data = {
    filteringText : ''
  };
});

发生这种情况是因为 ng-include 创建了一个新作用域，并且由于原型在 javascript 中的工作方式，子原型中的基元值会覆盖父原型中的基元值。如果在原型继承方面不清楚，请阅读本文。

PS ：使用$parent不是一个好的设计。它将视图与逻辑紧密结合。

这是因为 ng-include 正在创建自己的作用域，而您使用单选按钮分配的 ng-model 值仅限于该作用域。

因此，主体中的 {{ filteringText }} 不知道 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 模型值。

如果我们想从 ng-include 中更新主应用范围内的值，我们可以在输入.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}}

当您在 ng-include 中进行更改时，这将更新您的主体。

相关内容

最新更新

热门标签：