ng-promise-button

Simple angular directive for button showing progress and result of promise (eg resource request call)
1 person uses it
Author: 132277?v=3 DocX
Submitted by: 132277?v=3 DocX

ngPromiseButton

Simple angular directive for button showing progress and result of promise (eg resource request call)

What's this?

DEMO: http://plnkr.co/edit/pHwqib?p=preview

  • Adds visual feedback of progress, success or failure to button that starts async process (API request, ...)
  • Disable button during processing to avoid double-requests by mistake clicking on button
  • Enables you to make button that waits X seconds to cancel mistake before actually commiting request

All just with this code:

Simple button

<button promise-button='yourFuncThatReturnsPromise()'>Save world</button>

alt text

Cancelable timeout button

<button promise-button='yourFuncThatReturnsPromise()' promise-cease-period='3'>Lunch missile</button>

alt text

Installation

Install via bower:

bower install ng-promise-button --save

Add script to your index.html (if not using wiredep or simillar)

<script src='bower_components/ng-promise-button/promise_button.js'></script>

Add module to your application module dependencies

angular.module('YourApp', [..., 'ngPromiseButton'])...

Dependencies

  • Uses FontAwesome classes for feedback icons
  • uses CSS class '.spinner' for icons that should be animated (not included in this package)

Usage

See #what's this ;)

comments powered by Disqus
This page was last updated over 2 years ago.