在AngularJS中重用表单片段

创建一小部分HTML表单元素并在表单中多次将其作为片段重用（但使用不同的模型）的最佳方法是什么

e、 g.输入名字、姓氏、街道地址、城市、州、学生的邮政编码、家长、联系点

如果我对模型和输入进行硬编码，我会得到如下结果：

<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" >

---

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

---

这项技术（以及其他技术）将在为您发布的视频中详细介绍。请密切关注视频10、11、14和15。

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

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

然后，您可以在表单中使用此指令：

<form name="ctrl.myForm" ng-submit="ctrl.save()">
  <!-- other form fields -->
  <my-address form="ctrl.myForm" address="ctrl.employee.address"></my-address>
</form>

我不清楚您需要什么。如果您有多个

input

元素，并且以某种方式重用它们，那么您真的在保存代码吗？你能提供你想要减少的标记吗？我很确定我理解你的意思，但是你能提供一个指令和指令用法的例子吗？我很确定我需要指令中的

scope:true

，但我不确定我还需要注意什么。你是否提出了支付解决方案？对提供的样本进行投票。

(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>