javascript - 替换为true时合并ngClass属性

这是我的指令，在指令定义中设置了replace: true

<my-custom-tag>
</my-custom-tag>

这是指令模板

<div data-ng-class="{'class1': condition1, 'class2': condition2}">
</div>

现在，如果按照以下方式使用我的指令，则会引发错误

<my-custom-tag data-ng-class="{'class3': condition3}"></my-custom-tag>

原因是，由于模板还定义了data-ng-class属性，因此发出的HTML如下

<div data-ng-class="{'class3': condition3} {'class1': condition1, 'class2': condition2}"></div>

因此，在编译模板时出现语法错误。有什么办法合并这些对象？

Plunkr，在浏览器控制台中查看错误消息，并检查元素以检查data-ng-class属性

最佳答案

我看到有一个open issue在谈论这个。

可以在触发链接功能之前使用compile修改表达式。 Plunkr。

angular.module('directive', []).directive('myCustomTag', function() {
  return {
    template: "<div data-ng-class=\"{'foo': whenFoo()}\">My Custom Tag</div>",
    restrict: 'E',
    replace: true,
    compile: function compile(tElement, tAttrs) {

      tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');

      return function (scope, iElement, iAttrs) {
        scope.whenFoo = function() {
          return true;
        };

      };
    }
  };
});