角度の付いた再利用可能なフォーム

Question

入力の名前が異なる場合があり、フォームが表すデータが異なる場合を除いて、基本的に同じフォームがあります。

私はthis postから再利用可能なスニペットを使い始めることができましたが、私はそれを拡張してより動的にする方法を見つけ出したいと思います。

は、ここで（明らかに動作しません）。このコードのplunkerだ

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

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：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があります。