3

创建少量 HTML 表单元素并在表单中多次将其作为片段重用但使用不同模型的最佳方法是什么？

例如，输入名字、姓氏、街道地址、城市、州、学生的邮政编码、父母、pointOfContact

如果我对模型和输入进行硬编码，我会得到类似的东西：

<input name="student.firstName" ng-model="student.firstName" >
<input name="student.lastName" ng-model="student.lastName" >
<input name="parent.firstName" ng-model="parent.firstName" >
<input name="parent.lastName" ng-model="parent.lastName" >
<input name="pointOfContact.firstName" ng-model="pointOfContact.firstName" >
<input name="pointOfContact.lastName" ng-model="pointOfContact.lastName" >

作为一个 angularJs 菜鸟，我不知道该怎么做 $modelPrefix.firstName

模板 ？

<input name="$modelPrefix.firstName" ng-model="$modelPrefix.firstName" >
<input name="$modelPrefix.lastName" ng-model="$modelPrefix.lastName" >
4

2 回答 2

3

这是一个如何使用指令重用一组表单字段的示例。

首先创建一个包含公共字段的 html 模板文件（address.html）：

<div>
  <label for="line1-id">Address</label>
  <input id="line1-id" name="line1" type="text" ng-model="address.line1" required ng-maxlength="255" />
</div>
<div>
  <label for="city-id">City</label>
  <input id="city-id" name="city" type="text" ng-model="address.city" required ng-maxlength="255" />
</div>
<div>
  <label for="state-id">State</label>
  <input id="state-id" name="state" type="text" ng-model="address.state" required ng-maxlength="255" />
</div>
<div>
  <label for="postalCode-id">Postal code</label>
  <input id="postalCode-id" name="postalCode" type="text" ng-model="address.postalCode" required size="5" ng-maxlength="5" ng-minLength="5"/>
</div>

然后创建一个引用此模板 (address.js) 的指令：

(function() { 'use strict';

  angular.module('myModule').directive('myAddress', address);

  function address() {
    var directive = {
      scope: {
        form: '=form',
        address: '=address'
      },
      restrict: 'E',
      templateUrl: 'address.html'
    };

    return directive;
  }

}());

然后你可以在你的表单中使用这个指令：

<form name="ctrl.myForm" ng-submit="ctrl.save()">
  <!-- other form fields -->
  <my-address form="ctrl.myForm" address="ctrl.employee.address"></my-address>
</form>
于 2015-11-18T23:16:44.413 回答
2

将每个可重用的 HTML 组件包装在 Angular 指令中。这将允许您重用 HTML，同时仍将不同的模型传递给每个模型。

这种技术（和其他技术）将在http://egghead.io/上发布的视频中进行解释。 为了您的目的，请密切关注视频 10、11、14 和 15。

于 2013-04-06T01:31:56.347 回答