入力に対してクライアント側とサーバー側の検証を確立するために使用されるディレクティブを作成しています。バリデーター名の配列を受け入れ (例: aa-validate="required,unique"
)、それらをループし、すべての可能なバリデーターに対してクライアント側の検証ディレクティブを追加し (例:required
を追加する必要がngRequired
あります)、残りについてはサーバー側の検証 API に送信します。
その最後の部分はうまく機能します。ngModel
属性を監視し、100 ミリ秒のタイムアウトでサーバーに投稿しています。ただし、ディレクティブのリンク関数内からクライアント側の検証ディレクティブを設定しても、それらはコンパイルおよびリンクされません。つまり、彼らは何もしません。これが私のコードです:
angular.module('form', [])
.directive('aaValidate', ['$http', function($http) {
return {
priority: 1,
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
var validate = attrs.aaValidate,
validators = validate.split(',');
// This is the problem!
//
// Populate possible client-side validators
for (var i = 0, len = validators.length; i < len; i++) {
var validator = validators[i];
switch (validator) {
case 'required':
attrs.$set('ngRequired', 'true'); break;
// ... and so on for ngPattern, etc.
default: break;
}
}
scope.$watch(attrs.ngModel, function(value) {
// This part works!
//
// Clear existing timeout, reset it with an
// $http.post to my validation API, the result is
// passed into ctrl.$setValidity
});
}
}
}]);
$compile
を挿入し、リンク関数の最後で要素を再コンパイルしようとしました。おそらくいくつかの属性を削除できなかったため、無限再帰になってしまいましたが、このようにできたとしても、かなり醜い感じがします。正しいアプローチは何ですか?
どんな助けでも大歓迎です。前もって感謝します。
編集: jsFiddle: http://jsfiddle.net/3nUdj/4/