Question

所以我有一个在许多不同实例中基本相同的表单，除了输入的名称可能不同，表单所代表的数据也会不同。

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

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"],
};

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

那么如何设置snippet / 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对抗。

角度可重复使用的形式

1 个答案: