An angular library for making promise spinners and buttons that show the state of their call live.
angular-promise-react can be downloaded with bower:
bower install angular-promise-react --save
or you can download the latest version from github:
Latest releaseInclude angular-promise-react's script tag after angularjs' one
<script type="text/javascript" src="path/to/promise/react/angular-promise-react.min.js"></script>
Inject promise-react directive into your angular module:
angular.module('myApp', ['promise-react'])
Use this directive as attribute of your button. It will bind to click on the specified element and will run the function spedified as value when the button is pressed. This call should return a promise for the button to behave properly.
Makes the variables status and state available in the scope.
status contains the status of the button's call (detailed description below)state contains the data notified through the promise (if there has been such notification)<... promise-button="deferredCall()" promise-trigger="event" >
Add a promise-trigger attribute to specify a custom event the action should be binded to. Any event jQuey can bind to will work
Works exactly like an ngIf directive except that it will only render when the value provided matches the current button status.
Possible statuses are:
idle Active when the button has not been clicked yet, or after completion and delay.loading Active when the action has started.intermediate Active when the action has started and there have been notifications through the promise. done Active when the action has been resolved with success. The variable state will be set to the result of the promise.failed Active when the action has failed. The variable state will be set to the reason for failure of the promise.If when-promise is used with no attributes it will default to match any state but idle.
Similar to when-promise but it's value will be matched against the current state (last value notified through the promise).
If when-promise is used with no attributes it will default to match any loading status: loading and intermediate.
It will prepare a default button using some provided templates (that can be overriden in app.config). By default it assumes font-awesome is begin used.
Whatever is placed inside the tag will be displayed when the status is idle. When loading it will display two arrows spinning and a check-mark when done.
This library has been designed with extensibility and flexibility in mind. Here you have some of the most common use cases:
Button built with minimum markup. It has been designed to be used with font-awesome but its fully customizable (see next example). You can only choose what should be displayed when the button is idle.
All the states of a button depend on templates that can be configured in your app.config method. This is perfect if you want all the buttons in your app to behave the same except for the title they have.
Example of all the directives available being used