Question

我有一个用于在部分中创建新记录的表单，我在主视图中加载了这样的

<div ng-controller="NewProductController">
  <ng-include src=" 'views/partials/product-form.html' "></ng-include>
</div>

在表单中，我有一些输入字段

..
<input ng-model="cip" type="text" id="cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>
<input ng-model="name" type="text" id="name" class="form-control" placeholder="Enter the name" />

在我的控制器中，我正在发送一个带有输入字段值的POST请求：

...
.controller('NewProductController', function(Product, $scope) {

  $scope.create = function () {
    Product.create( {'cip': $scope.cip,
                     'name': $scope.name,
                     'dosage': $scope.dosage,
                     ...
                     });
    };

问题是，当输入字段的值发生变化时，它不会反映在控制器中（$ scope.cip和$ scope.name是未定义的，除非我用一些值初始化它们）但是当$ scope.cip和$ scope.name在控制器中更改，更改正确反映在视图中。

我认为那种更新是自动的还是我遗漏了什么？

Answer 1

之所以发生这种情况，是因为ng-include创建了子范围。由于您正在管理子范围中的模型字段，即模板html中的字段，因此在定义控制器的父作用域中不能使用这些字段。

要解决此问题，首先需要做的是创建一个obj，例如product，并在控制器NewProductController范围内定义它。

$ scope.product = {};

然后，模板应绑定到此产品对象的子属性。

<input ng-model="product.cip" type="text" id="cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>

现在，您的更改将在父产品对象中提供。

您可以使用此product传递ng-init对象来改善它

<ng-include src=" 'views/partials/product-form.html' " ng-init='model=product'></ng-include>

现在，您的模板输入字段将更改为

<input ng-model="cip" type="text" id="model.cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>

<强>优势您的模板不依赖于父模型类的结构。依赖是明确的。模板变得更加可重用，因为它清楚地定义了它使用的模型，就像你的情况一样，模板与Product模型一起使用。

为了完整答案，我必须链接到这篇必读文章，Understanding Scopes

视图更改时模型未更新

1 个答案: