Implementation of a directive for a button with a busy indicator using spin.js
1. spin.js (doesn't depend on jQuery) 2. angular.js<button type="submit" class="btn btn-success btn-lg" data-indi-click="vm.getComments()">Get Comments</button>
....
<div class="row" data-ng-controller="qtestController as vm" ng-cloak>
<h1>Q Experiments</h1>
<form class="form-inline" role="form">
<button type="submit" class="btn btn-success btn-lg" data-indi-click="vm.getComments()">Get Comments</button>
</form>
</div>
<script src="/Scripts/spin.js"></script>
<script src="/Scripts/angular.min.js"></script>
....
(function () {
'use strict';
var controllerId = 'qtestController';
angular.module('app').controller(controllerId,
['$scope', 'qtestDataService', qtestController]);
function qtestController($scope, qtestDataService) {
var vm = this;
vm.comments = [];
vm.getComments = getComments;
//#region Internal Methods
function getComments() {
vm.comments = qtestDataService.getDataQ(); // returns a promise
return vm.comments;
}
//#endregion
}
})();