我正在使用 Bootstrap 中的 CSS 类来突出显示有错误的字段，如下所示：
<div class="form-group" ng-class="{'has-error': $ctrl.form.name.$invalid && $ctrl.form.name.$touched}">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control" ng-model="$ctrl.client.name">
</div>
我不想为每个字段重复相同的 ng-class 属性，所以我试图创建一个属性指令，我可以在其中指定字段并让 angular 生成 ng-class：
<div class="form-group" has-error="$ctrl.form">
但是我无法获得角度来编译“新”ng-class：
angular.module('myApp').directive('hasError', ($compiler)=> {
return {
restrict: 'A',
compile: (element) => {
var fieldExpression = element.attr('has-error');
element.attr('ng-class', `{\'has-error\': ${fieldExpression}.$touched && ${fieldExpression}.$invalid }`);
element.removeAttr('has-error');
compilerService(element);
}
}
});
无需添加和编译ng-class指令，只需直接计算和操作链接函数中的类：
app.directive('hasError', () => {
return {
restrict: 'A',
link: (scope,elem,attrs) => {
scope.$watch(
() => {
let expn = scope.$eval(attrs.hasError);
return expn && expn.$touched && expn.$invalid;
},
(value) => {
elem.removeClass('has-error');
value && elem.addClass('has-error');
}
);
}
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句