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

 手机用户2502903077 发布于 2022-12-31 19:50

我正在尝试构建一个指令,用于更改缓慢ajax调用的按钮上的加载状态.基本上,我们的想法是将一个属性"ng-loading"设置为一个按钮元素,然后让指令添加其余内容.

这是html代码:


这是指令代码:

.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(''));
      $compile(element.contents())(scope);
    }
  };
}]);

它在渲染的HTML中看起来都是正确的,但从指令添加的属性根本不是功能.我可以将这些属性移动到HTML代码中,一切都很好,但在许多地方这是相当多的冗余代码.

我引用了Angular指令来动态设置现有DOM元素的属性,但它并没有解决我的问题.

欢迎提出任何意见/建议.提前致谢.

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);
    

    2022-12-31 19:51 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有