添加/删除类bahaving奇怪的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不适用于根元素。 设置根元素文本等工作正常，但添加/删除类不。 那是为什么？