ng-bs-animated-button
Angular/Bootstrap animated submit button directive.
Demo
http://jeremypeters.github.io/ng-bs-animated-button/
Usage
- Install via Bower:
bower install ng-bs-animated-button
-
Include
ng-bs-animated-button.js
andng-bs-animated-button.css
in your app. They should be located atbower_components/ng-bs-animated-button/
. -
Add
jp.ng-bs-animated-button
as a module dependency to your app:
angular.module('yourApp', ['jp.ng-bs-animated-button']);
- Add the directive with the required attributes 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',
...
};
});
Options
Option | Default |
---|---|
buttonDefaultClass |
'btn-primary' |
buttonSubmittingClass |
'btn-primary' |
buttonSuccessClass |
'btn-primary' |
buttonErrorClass |
'btn-danger' |
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' |
animationCompleteTime |
'2000' |
iconsPosition |
'left' |
onlyIcons |
false |
Disabling the button
<jp-ng-bs-animated-button is-submitting="isSubmitting" result="result" options="options" form-is-invalid="formIsInvalid()"></jp-ng-bs-animated-button>