角度可重用的表单

Question

所以我有一个在许多不同情况下基本相同的表单，除了输入的名称可能会有所不同，并且表单所代表的数据会有所不同。

我从 this post 获得了可重用 sn-ps 的良好开端，但我想对此进行扩展，并弄清楚如何使其更具动态性。

HTML

<script type='text/ng-template' id="mySnippet"> 
  <form>
    {{mySinppet.firstThing}}<input id="first-input"/>
    {{mySinppet.secondThing}}<input id="second-input"/>
  </form>
</script>
  
<ng-include src="'mySnippet'" ng-model="thingOne"></ng-include>
<ng-include src="'mySnippet'" ng-model="thingTwo"></ng-include>

JS

$scope.thingOne={
  firstThing: "1",
  secondThing: "2",
  foo: src["first-input"],
  bar: src["second-input"],
};
$scope.thingTwo={
  firstThing: "3",
  secondThing: "4",
  first: src["first-input"],
  second: src["second-input"],
};

这是这段代码的代码（显然不起作用）：https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview

那么如何设置 sn-p/ng-includes 以允许与模型通信？

Answer 1

您链接到的答案是 4 岁。再也没有人像这样编码了。 不被接受的答案虽然暗示了更好的解决方案。

<reusable-form ng-model="thingOne"></reusable-form>
<reusable-form ng-model="thingTwo"></reusable-form>

但是，您制作表单的动态/可重用程度是有限的。

您绑定到表单的模型应该具有相同的属性。

$scope.thingOne={
  firstThing: "1",
  secondThing: "2"
};
$scope.thingTwo={
  firstThing: "3",
  secondThing: "4"
};

这样指令足够通用，可以重用：

  .directive('reusableForm', function() {
    return {
      restrict: 'E',
      scope: {
        ngModel: '='
      },
      template: `
        <input id="first-input" type="text" ng-model="ngModel.firstThing" />
        <input id="second-input" type="text" ng-model="ngModel.secondThing" />
      `
    }
  });

https://plnkr.co/edit/3vrDkrBkA5u6w4hQiW78?p=preview

如果你想让它比这更有活力，你最终会得到意大利面条代码并与scope mess斗争。