Question

创建一小部分HTML表单元素并在表单中多次重复使用它作为代码段但使用不同模型的最佳方法是什么？

e.g。 firstName，lastName，streetAddress，city，state，student for student，parent，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 noob，我不知道如何做$ modelPrefix.firstName

模板？

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

Answer 1

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

首先使用公共字段（address.html）创建一个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>

Answer 2

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

http://egghead.io/发布的视频中将真正解释这种技术（以及其他）。为了您的目的，请密切关注视频10,11,14和15。

重用AngularJS中的表单片段

2 个答案: