Angular Directive:在编译时在现有模板元素上添加ng-class指令

Question

简而言之,这个想法是通过不必手动添加ng-class={'has-error': 'formName.inputName.$invalid'}每一个来简化模板form-group

所以我想创建一个指令,生成一个将添加到模板元素的字符串.该字符串是ng-class带表达式的属性

我认为创建一个在编译阶段添加ng-class属性的快速指令就足够了,但它似乎没有削减它.

指令定义对象

{
    restrict: 'C',
    compile: function(tElement, tAttrs) {
        var $elem = angular.element(tElement),
            formName = $elem.parents('[ng-form]').length ? $elem.parents('[ng-form]').attr('ng-form') : $elem.parents('form').attr('name'),
            controlName = $elem.find('.form-control').attr('name');

        $elem.attr('ng-class', '{"has-error": ' + formName + '.' + controlName + '.$invalid}');

        console.log('added ng-class attr', $elem.attr('ng-class'));
    }
}

插在这里

看到控制台

第1个动态添加form-group了ng-class属性.
与之关联的表达式是正确的
但该ng-class指令永远不会执行

第二个在模板中手动添加form-group其ng-class属性,并且可以正常工作

-

我在这里错过了什么？

Answer 1

管理使其工作而不添加额外的观察者(授予,ng-class使用观察者,但在测试建议的解决方案后,我看到观察者数量的增加)

我不得不在postLink中编译新的DOM元素,但为了避免递归,我需要删除指令本身.这阻止我重用类名,例如"form-group"

这是工作指令

function bsFormClass($compile) {
  return {
    restrict: 'A',

    compile: function (tElement) {

        var $elem = angular.element(tElement),
            controlName = $elem.find('.form-control').attr('name');

        if(!controlName) { return; }

        var formName = $elem.parents('[ng-form]').length ? $elem.parents('[ng-form]').attr('ng-form') : $elem.parents('form').attr('name');

        $elem.attr('ng-class', '{"has-error": ' + formName + '.' + controlName + '.$invalid}');
        $elem.removeAttr('bs-form-class');

        return {
            post: function(scope, elem, attrs) {
                $compile(elem)(scope);
            }
        }
    }
  }
}

谢谢你的帮助