$scope.options = { iconsPosition: 'right' };
$scope.options = { buttonDefaultClass: 'btn-default', buttonSubmittingClass: 'btn-info', buttonSuccessClass: 'btn-success' };
$scope.options = { buttonDefaultText: 'Lorem ipsum', buttonSubmittingText: 'Dolor sit amet', buttonSuccessText: 'Consectetur elit' };
$scope.options = { buttonSubmittingIcon: 'fa fa-spinner', buttonSuccessIcon: 'fa fa-smile-o' };
$scope.options = { animationCompleteTime: '5000' };
$scope.options = { buttonSizeClass: 'btn-lg' };
$scope.options = { onlyIcons: true };
$scope.options = { onlyIcons: true, buttonInitialIcon: 'fa fa-send', buttonSubmittingIcon: 'fa fa-circle-o-notch', buttonSuccessIcon: 'fa fa-thumbs-up' };
Add as a module dependency to your app:
angular.module('yourApp', ['jp.ng-bs-animated-button']);
Add the directive to your template:
<jp-ng-bs-animated-button is-submitting="isSubmitting" result="result" options="options"></jp-ng-bs-animated-button>
Add the required scope variables and any options to your controller:
app.controller('yourCtrl', function($scope) { // Required - set to true on submission $scope.isSubmitting = null; // Required - set to 'success' or 'error' on success/failure $scope.result = null; // Optional $scope.options = { buttonDefaultText: 'Lorem ipsum', ... }; });
Option | Default |
---|---|
buttonDefaultClass
|
'btn-primary' |
buttonSubmittingClass
|
'btn-primary' |
buttonSuccessClass
|
'btn-primary' |
buttonErrorClass
|
'btn-danger' |
buttonSizeClass
|
null |
buttonDefaultText
|
'Submit' |
buttonSubmittingText
|
'Submitting...' |
buttonSuccessText
|
'Completed' |
buttonErrorText
|
'There was an error' |
buttonInitialIcon
|
'glyphicon glyphicon-plus' |
buttonSubmittingIcon
|
'glyphicon glyphicon-refresh' |
buttonSuccessIcon
|
'glyphicon glyphicon-ok' |
buttonErrorIcon
|
'glyphicon glyphicon-remove' |
formIsInvalid
|
'' |
animationCompleteTime
|
'2000' |
iconsPosition
|
'left' |
onlyIcons
|
false |