Check out this simple directive I created to display a spinner on my button while something is happening remotely: http://plnkr.co/edit/rAJ4X7A3iidmqUD2M63A?p=preview
Here's the html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController as vm">
<button ng-click="vm.saveAction()" class="btn btn-primary" type="button">
<!-- Original template -->
<i class="fa fa-floppy-o" ng-hide="vm.save"></i>
<i class="fa fa-circle-o-notch fa-spin ng-hide" ng-show="vm.save"></i> Save
<!-- end -->
</button>
<button ng-click="vm.removeAction()" class="btn btn-default" type="button">
<!-- Desired template (directive) -->
<i my-spinner="vm.remove" icon="fa fa-trash"></i> Remove
<!-- end -->
</button>
</body>
</html>
And here's the JavaScript:
app = angular.module('app', []);
app.controller('myController', ['$timeout', function($timeout) {
var vm = this;
vm.save = false;
vm.remove = false;
vm.saveAction = function() {
vm.save = true;
// ...save something remote
$timeout(function() { // <-- simulate an async callback or whatever...
vm.save = false;
}, 3000);
};
vm.removeAction = function() {
vm.remove = true;
// ...remove something remote
$timeout(function() { // <-- simulate an async callback or whatever...
vm.remove = false;
}, 3000);
};
}]);
app.directive('mySpinner', function() {
var directive = {
restrict: 'A',
scope: {
mySpinner: '@',
icon: '@'
},
template: '<i class="{{icon}}" ng-hide="{{mySpinner}}"></i>' +
'<i class="fa fa-circle-o-notch fa-spin ng-hide" ng-show="{{mySpinner}}"></i>',
};
return directive;
});
I chose to use ng-show and ng-hide in my solution so that I don't have to $observe/$watch anything in my directive... Everything seems correct in the directive, but when I click on the Remove button, nothing happens. Can anyone help me troubleshoot this issue? Thank you!