すばらしい答えをくれた@farinczに感謝します。ユースケースに合わせていくつかの変更を加えました。
このバージョンには、次の 3 つのディレクティブが用意されています。
bs-has-successbs-has-errorbs-has(他の2つを併用したい場合に便利)
私が行った変更：
- フォーム フィールドがダーティな場合にのみ has ステートを表示するチェックを追加しました。つまり、誰かが操作するまで表示されません。
- Angular の jQLite では、タグ名による要素の検索のみがサポートされ
element.find()ているため、jQuery を使用していない場合に 渡される文字列を変更しました。element.find()
- 選択ボックスとテキストエリアのサポートが追加されました。
- 要素の子がまだ DOM にレンダリングされていない可能性がある場合 (たとえば、要素の子が でマークされている場合) をサポートするため
element.find()に、をラップしました。$timeoutng-if
if返された配列の長さをチェックするように式を変更しました ( if(input)from @farincz の回答は常に true を返しますelement.find()。これは、from が jQuery 配列であるためです)。
誰かがこれが役立つことを願っています！
angular.module('bs-has', [])
.factory('bsProcessValidator', function($timeout) {
return function(scope, element, ngClass, bsClass) {
$timeout(function() {
var input = element.find('input');
if(!input.length) { input = element.find('select'); }
if(!input.length) { input = element.find('textarea'); }
if (input.length) {
scope.$watch(function() {
return input.hasClass(ngClass) && input.hasClass('ng-dirty');
}, function(isValid) {
element.toggleClass(bsClass, isValid);
});
}
});
};
})
.directive('bsHasSuccess', function(bsProcessValidator) {
return {
restrict: 'A',
link: function(scope, element) {
bsProcessValidator(scope, element, 'ng-valid', 'has-success');
}
};
})
.directive('bsHasError', function(bsProcessValidator) {
return {
restrict: 'A',
link: function(scope, element) {
bsProcessValidator(scope, element, 'ng-invalid', 'has-error');
}
};
})
.directive('bsHas', function(bsProcessValidator) {
return {
restrict: 'A',
link: function(scope, element) {
bsProcessValidator(scope, element, 'ng-valid', 'has-success');
bsProcessValidator(scope, element, 'ng-invalid', 'has-error');
}
};
});
使用法：
<!-- Will show success and error states when form field is dirty -->
<div class="form-control" bs-has>
<label for="text"></label>
<input
type="text"
id="text"
name="text"
ng-model="data.text"
required>
</div>
<!-- Will show success state when select box is anything but the first (placeholder) option -->
<div class="form-control" bs-has-success>
<label for="select"></label>
<select
id="select"
name="select"
ng-model="data.select"
ng-options="option.name for option in data.selectOptions"
required>
<option value="">-- Make a Choice --</option>
</select>
</div>
<!-- Will show error state when textarea is dirty and empty -->
<div class="form-control" bs-has-error>
<label for="textarea"></label>
<textarea
id="textarea"
name="textarea"
ng-model="data.textarea"
required></textarea>
</div>
これらすべてをまとめたGuilherme's bower パッケージをインストールすることもできます。