Question

我正在使用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类：

 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);
        }
    }
});

Answer 1

无需添加和编译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');
               }
            );
        }
    }
});

如何创建属性指令以在AngularJS的元素中插入另一个属性指令

1 个答案: