Question

相对较新的Angular，并尝试创建一个用于创建和编辑操作的表单。我希望分享一些表单字段，但根据我的理解ng-include创建一个新范围，因此我的字段（使用ng-model）不会绑定到原始范围。结果是，在提交表单时，我的字段不会被发送。

如果我以错误的方式解决这个问题，请指导我提供任何可能有用的文档。我的部分问题是我不知道在哪里看这一点。谢谢！

创建表单

<section data-ng-controller="AlbumsController">
  <div class="page-header">
    <h1>New Album</h1>
  </div>
  <form data-ng-submit="create()">
    <section data-ng-include="'/modules/albums/views/form.html'"></section>
    <input type="submit" class="btn btn-primary" value="Add Album">
  </form>
</section>

表格部分

<fieldset class="well">
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <div class="controls">
      <input type="text" data-ng-model="album.name" id="name" class="form-control" placeholder="Name" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="name">Album Picture</label>
    <div class="controls">
      <input type="text" data-ng-model="album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="releaseDate">Release Date</label>
    <div class="controls">
      <input type="date" data-ng-model="album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="sku">SKU</label>
    <div class="controls">
      <input type="text" data-ng-model="album.sku" id="sku" class="form-control" placeholder="SKU" required>
    </div>
  </div>
</fieldset>

Answer 1

更改：<section data-ng-include="'/modules/albums/views/form.html'"></section>

至：<section data-ng-include src="'/modules/albums/views/form.html'"></section>

Answer 2

正如我所见，你做得对。您可能需要在$scope.album上定义$scope，然后才能在子范围内使用它。

$scope.album = {}; // set it on your AlbumsController

Answer 3

我遇到了同样的问题，在我的解决方案中，我使用父作用域在子视图中绑定数据。像这样：

<fieldset class="well">
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <div class="controls">
      <input type="text" data-ng-model="$parent.album.name" id="name" class="form-control" placeholder="Name" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="name">Album Picture</label>
    <div class="controls">
      <input type="text" data-ng-model="$parent.album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="releaseDate">Release Date</label>
    <div class="controls">
      <input type="date" data-ng-model="$parent.album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="sku">SKU</label>
    <div class="controls">
      <input type="text" data-ng-model="$parent.album.sku" id="sku" class="form-control" placeholder="SKU" required>
    </div>
  </div>
</fieldset>

这很难看，但工作对我有好处。

如何将表单字段包含为ng-include内部表单？

创建表单

表格部分

3 个答案: