Angularjs 从指令向元素动态添加角度属性

我正在尝试构建一个指令，该指令可以更改缓慢ajax调用的按钮上的加载状态。基本上，这个想法是将属性“ng loading”设置为按钮元素，并让指令添加其余的内容

这是html代码：

<button class="btn btn-primary" name="commit" type="submit" ng-loading="signupLoading">
  Submit
</button>

提交

这是指令代码：

.directive('ngLoading', ['$compile',  function($compile) {
  return {
    restrict: 'A',
    replace: false,
    terminal: true,
    link: function(scope, element, attrs) {
      element.attr('ng-class', '{loading:' + attrs['ngLoading'] +'}');
      element.attr('ng-disabled', attrs['ngLoading']);
      element.append(angular.element('<img class="loading-icon" src="/assets/images/loading-icon.gif"/>'));
      $compile(element.contents())(scope);
    }
  };
}]);

.directive（'ngLoading'，['$compile'，function（$compile）{
返回{
限制：“A”，
替换：false，
终端：是的，
链接：函数（范围、元素、属性）{
attr（'ng-class'，'{loading:'+attrs['ngLoading']+'}'）；
元素attr（'ng-disabled'，attrs['ngLoading']）；
元素.append（angular.element（“”））；
$compile（element.contents（））（范围）；
}
};
}]);

在呈现的HTML中，这一切看起来都是正确的，但从指令中添加的属性根本不起作用。我可以将这些属性移动到HTML代码中，一切都很好，但在许多地方这是相当多的冗余代码

我引用了这篇文章，但它并不能解决我的问题

---

欢迎提出任何意见/建议。提前感谢。

您不需要重新编译该指令。如果您只需要一些DOM操作，您可以根据范围属性的更改添加和删除类。你可以用$watch代替

JAVASCRIPT

.directive('ngLoading', function() {
  return function(scope, element, attrs) {
    var img = angular.element('<img class="loading-icon" src="/assets/images/loading-icon.gif"/>');
    element.append(img);
    scope.$watch(attrs.ngLoading, function(isLoading) {
       if(isLoading) {
         img.removeClass('ng-hide');
         element.addClass('loading');
         element.attr('disabled', '');
       } else {
         img.addClass('ng-hide');
         element.removeClass('loading');
         element.removeAttr('disabled');
       }
    });
  };
});

---

谢谢你的回答。这应该能解决我的问题。虽然我仍然想知道为什么我的代码不起作用。检查我的更新，如果你想知道为什么我们的代码不起作用，谢谢你的帮助。我尝试了$compile（elem）（范围）；它仍然不起作用。它使我的浏览器（Chrome）不断崩溃。非常感谢。这真的很有帮助。

elem.removeAttr('ng-loading');
$compile(elem)(scope);