angularjs – 从指令中动态地向元素添加角属性

我正在尝试建立一个指令,改变缓存ajax调用按钮上的加载状态.基本上这个想法是设置一个属性“ng-load”到一个按钮元素,并让该指令添加其余的东西.

这是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中,这一切看起来都是正确的,但是从该指令添加的属性根本不是funcioning.我可以将这些属性移动到HTML代码,一切都很好,但这在很多地方都是一些冗余的代码.

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

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

您不需要重新编译该指令,如果您想要的是某些DOM操作,则可以根据scope属性的更改添加和删除类.您可以使用$watch.

JAVASCRIPT

.directive('ngLoading',function() {
  return function(scope,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);

原文地址：https://www.jb51.cc/angularjs/140789.html