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

Question

我正在使用 Bootstrap 中的 CSS classes 来突出显示有错误的字段，如下所示：

<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">

但我无法angular编译'new' 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);
        }
    }
});

Answer 1

无需添加和编译 ng-class 指令，只需直接在 link 函数中计算和操作类：

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 中的元素中插入另一个属性指令

How to create a Attribute Directive to insert another attribute directive in a element in AngularJS

angularjs

angularjs-directive