angularjs - 从指令向元素动态添加 Angular 属性

Question

我正在尝试构建一个指令来更改按钮上的加载状态以进行慢速 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);
    }
  };
}]);

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

我引用了帖子 Angular directive to dynamically set attribute(s) on existing DOM elements但它不能解决我的问题。

欢迎任何评论/建议。提前致谢。

Answer 1

如果您想要的只是一些 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)(scope);它应该可以正常工作，但我不推荐它，因为每个具有此类指令的元素都必须再次重新编译。

更新 :
使用前 $compile删除元素的属性“ngLoading”以防止无限编译。

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