Javascript 添加/删除类BaharaRjs指令

我对社交媒体按钮有一个自定义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);
    },        
  };
});

app.directive（'socialButton'，function（）{
返回{
要求：'ngModel'，
替换：false，
限制：'E'，
范围：正确，
是的，
模板：“”，
链接：函数（范围、元素、属性）{
scope.provider=attrs.provider；
var btn=元素子元素（“a”）；
var eval=函数（）{
返回范围：$eval（attrs.ngModel）；
};
变量激活=功能（值）{
如果（值==true）{
btn.addClass（“活动”）；
}
如果（值==false）{
btn.removeClass（“活动”）；
}
};
var active=eval（）；
范围$watch（评估，激活）；
激活（主动）；
},        
};
});

这在其当前形式下运行良好。 不过

如果我将其更改为“replace:true”和“var btn=element；”，使A元素成为根元素，则它不再将活动类应用于链接。 看起来addClass和removeClass对根元素不起作用。 设置根元素文本等工作正常，但添加/删除类却不行。 为什么会这样？

对我来说很有用：。另外，您可以执行

btn.toggleClass（'active'，value）

而不是单独的addClass和removeClass调用。