我正在尝试构建一个指令,用于更改缓慢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元素的属性,但它并没有解决我的问题.
欢迎提出任何意见/建议.提前致谢.
如果你想要的只是一些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);