4

モデルとモデル属性に基づいてフォーム入力を生成するフォーム入力ディレクティブを構築しようとしています。例えば、

  1. フィールドが名前でタイプがテキストの場合、ディレクティブは入力 HTML コントロールを返します。
  2. フィールドがリストの場合、選択ボックスなどを返します

これらの入力は、ビューで ng-repeat を使用して生成されます。入力はスコープ内のモデルにバインドされます。これはうまくいっています。ただし、フォームの検証は失敗します。つまり、入力コントロールが無効な場合でも、メイン フォームはフォームが有効であることを示します。

問題を説明するために簡単な plunkr を作成しました - http://plnkr.co/edit/R3NTJK?p=preview

注：入力名フィールドもスコープモデルから動的に生成されるため、実際にフォームをネストしました。

私は過去2日間、これを手に入れようとしてきましたが、これは本当に私を狂わせています.

何かが欠けているかどうかはわかりません。

誰かがこれで私を助けてくれれば、本当に感謝しています。

4

1 に答える 1

2

更新：次のリンク機能を使用します。

link: function linkFn(scope,elem,attr){
   var jqLiteWrappedElement = 
       angular.element('<input type="url" name="socialUrl" ng-model="social.url">');
   elem.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
}

プランカー。

理由がわからないので、replaceWith()$compileを呼び出す前にmustを実行する必要があります。なぜそうなのか説明していただければ幸いです。

Update2：以下のコメントで、Artemは、リンク関数を呼び出す前にDOMを変更する必要があると述べているため、これも機能します。

var myElem = angular.element('some html');
var linkFn = $compile(myElem);
element.replaceWith(myElem);
linkFn(scope);

元の答え：

リンク関数の代わりに、ディレクティブでテンプレートを使用してください。

template: '<input type="url" name="socialUrl" ng-model="social.url">'
于 2013-03-15T16:09:06.863 に答える