javascript - 添加/删除带有奇怪 AngularJS 指令的类

Question

我有一个用于社交媒体按钮的自定义 AngularJs 指令：

app.directive('socialButton', function () {
  return {
    require: 'ngModel',
    replace: false,
    restrict: 'E',
    scope: true,
    transclude: true,
    template: '<a href="" class="btn btn-sm btn-fade btn-{{provider}}" ><i class="icon-{{provider}}" ></i><span ng-transclude></span></a>',
    link: function (scope, element, attrs) {

        scope.provider = attrs.provider;
        var btn = element.children("a");

        var eval = function () {
            return scope.$eval(attrs.ngModel);
        };

        var activate = function (value) {
            if (value == true) {
                btn.addClass("active");
            }
            if (value == false) {
                btn.removeClass("active");
            }
        };

        var active = eval();
        scope.$watch(eval, activate);
        activate(active);
    },        
  };
});

这在其当前形式下运行良好。然而。

如果我将其更改为“replace：true”和“var btn = element;” 因此 A 元素成为根，它不再将活动类应用于链接。似乎 addClass 和 removeClass 不适用于根元素。设置根元素文本等工作正常，但添加/删除类不能。这是为什么？