Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
a spinner directive using bootstrap modal and font-awesome fonts
(function() {
var app = angular.module('mcbSpin', [])
.directive('spinner', [Spinner]);
function Spinner() {
return {
restrict: 'EA', //E = element, A = attribute, C = class, M = comment
replace: true,
scope: {
show: '@',
},
template: ' <div class="modal fade"> ' +
' <style> ' +
' .spinner { ' +
' width : 80px; ' +
' float : none; ' +
' margin : 0 auto; ' +
' text-align : center; ' +
' } ' +
' .spinner i { ' +
' margin : 0 auto; ' +
' text-align : center; ' +
' display : block; ' +
' width : auto; ' +
' height : auto; ' +
' } ' +
' </style> ' +
' <div class="modal-dialog "> ' +
' <div class="modal-content spinner"> ' +
' <div class="modal-body" > ' +
' <span> ' +
' <i class="fa fa-spinner fa-spin fa-2x"></i> ' +
' </span> ' +
' </div> ' +
' </div> ' +
' </div> ' +
' </div> ' ,
link: function(scope, element, attrs) {
scope.$watch('show', function(n, o) {
if (n === 'true') {
$('div[spinner]').modal('show');
} else if(n === 'false') {
$('div[spinner]').modal('hide');
}
}, true);
} //DOM manipulation
};
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.