You can use ng-disabled bound to a property on the controller that you set to true before the xhr and false after the xhr completes. Click event and therefore ng-click will not file while a button is disabled.
Documentation : https://docs.angularjs.org/api/ng/directive/ngDisabled
Update
If you want to use ng-disabled with any element (e.g. a) you can use a custom click handler e.g.:
yourApp.directives.directive('myClick', ['$parse',function ($parse): ng.IDirective {
return {
restrict: 'A',
link: (scope, element:JQuery, attrs) => {
var fn = $parse(attrs.picClick);
element.on('click', function (event) {
// The core disabled logic detection
if (attrs.disabled) return;
scope.$apply(function () {
fn(scope, { $event: event });
});
});
}
}
}]);
Of course, you should style your element differently for when it has the attribute disabled set to true.
Another way
Alternatively you can use a pair multually exclusive elements, only one shown at a time using something as simple as an (ng-show)