我正在尝试构建一个指令,用于在处理缓慢的ajax调用时更改按钮的加载状态。基本上,想法是将一个属性"ng-loading"设置为按钮元素,并让指令添加其余的内容。
这是HTML代码:
这是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指令:为现有DOM元素动态设置属性,但它没有解决我的问题。
欢迎任何评论/建议。提前致谢。