Я пытаюсь создать директиву, изменяющую статус загрузки на кнопках для медленных вызовов 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-код, и все работает отлично, но это довольно много избыточный код во многих местах.
Я ссылался на директиву post Angular для динамического набора атрибутов на существующие элементы DOM, но это не решает мою проблему.
Любые комментарии/предложения приветствуются. Спасибо заранее.