ディレクティブ マークアップを置き換えるように設定されたテンプレート マークアップであるタグにバインドせずng-modelに、ディレクティブで (with で)使用することは可能ですか?NgModelController<input>
**編集 -テンプレートのラッピングを除いて、必要な機能を備えたフィドルですspan
願いが叶うとしたら、次のようなディレクティブを定義したいと思います。
<multi-component-zip ng-model='address.zipCode' size="10"/>
ここで、multi-component-zipディレクティブはプロパティで定義されます:
template: '<input ng-model="collapsedZip" ng-pattern="/^[0-9]{5}(-[0-9]{4})?$/" type="text" />',
replace: true,
require: 'ngModel'
ここでのテンプレートng-modelは、ディレクティブ自体とは別に扱われます。
次のような値をcollapsedZip変更するためにディレクティブ内で使用したいと思います。address.zipCode{base: '90210', plusFour: '1234'}NgModelController
しかし、もちろん、実際には親からの ng-model が適用される<input>ため、エラーが発生します。
Multiple directives [ngModel, ngModel] asking for 'ngModel' controller on: <input ng-model="address.zipCode collapsedZip" ... >
また、おそらく別のアプローチは、 ng-model for の使用を避けcollapsedZip、代わりに input 要素で直接 DOM 操作を行って、ユーザーの入力を読み取り/表示することです。
属性ng-modelが親タグから引き続き継承され、<input>.
template <input>では、 を a のような別の要素でラップしてみません<span>か? ng-modelこれにより、 2 つがかなりうまく分離されます。まあ、の<input>ような他の属性size=10は継承する必要があります。
データをディレクティブにバインドする代わりにng-model、カスタム属性を使用し、ウォッチ式または別の方法を使用して と同期できaddress.zipCodeますcollapsedZip。それはうまくいきます。しかし、それを使用できればng-model、検証用に作成した他のディレクティブを使用して、生活が少し楽になります。