angular-promise-messages

The promiseMessages module provides enhanced support for displaying messages depending on some promise within templates.

• Demo

Installation

install via npm

npm install angular-promise-messages --save

install via bower

bower install angular-promise-messages --save

Add promiseMessages as dependency in your module:

angular.module('yourModule', [
    'promiseMessages'
]);

// es6 way
import promiseMessages from 'angular-promise-messages';

angular.module('yourModule', [
    promiseMessages.name
]);

Usage

Basic usage

Use the attribute for to pass a promise to a directive. Then the directive starts watching the promise.

<promise-messages for="promise">
    <!-- Default message -->
    <promise-message>Default</promise-message>
    <!-- Pending message -->
    <promise-message when="pending">Pending</promise-message>
    <!-- Fulfilled message -->
    <promise-message when="fulfilled">Fulfilled</promise-message>
    <!-- Rejected message -->
    <promise-message when="rejected">Rejected</promise-message>
</promise-messages>

function someAction () {
  // Passing a promise object to the `for` attribute
  // of the `promiseMessages` directive
  $scope.promise = $http.get('http://...');
}

Function support

Use the attribute forAction when you want to pass a promise which will be returned by a function.

<promise-messages for-action="functionThatReturnsPromise()">
    <promise-message>Default</promise-message>
    <promise-message when="pending">Pending</promise-message>
    <promise-message when="fulfilled">Fulfilled</promise-message>
    <promise-message when="rejected">Rejected</promise-message>
</promise-messages>

function functionThatReturnsPromise () {
  // Passing a promise object to the `forAction` attribute
  // of the `promiseMessages` directive by returning promise.
  return $http.get('http://...');
}

Theming

If the state attribute is specified, current state will be published into related scope.

Then, you can theme it as you want by using published states.

<promise-messages for="promise" state="$state" ng-disabled="$state.pending"
                  ng-class="{'btn-default': $state.none || $state.pending, 'btn-danger': $state.rejected, 'btn-success': $state.resolved}">
    <promise-message>Default</promise-message>
    <promise-message when="pending">Pending</promise-message>
    <promise-message when="fulfilled">Fulfilled</promise-message>
    <promise-message when="rejected">Rejected</promise-message>
</promise-messages>

Auto resetting state

Resetting a promise state automatically when the state is changed by configuring delays until reset.

It is useful if want to reset a message when a promise state was changed (such as rejected).

Configure globally

.config(function (promiseMessagesProvider) {
    promiseMessagesProvider
        // will reset state after 3000ms when fulfilled
        .state('fulfilled')
            .setAutoResetDelay(3000)
        .end()
        // will reset state after 500ms when rejected
        .state('rejected')
            .setAutoResetDelay(500)
        .end()
})

Overriding global configurations

• disableAutoReset: Disable auto resetting
• autoResetDelay: Override auto resetting delay

<promise-messages for="promise">
    <promise-message>Default</promise-message>
    <promise-message when="pending">Pending</promise-message>
    <!-- Disable auto resetting -->
    <promise-message when="fulfilled" disable-auto-reset>Fulfilled</promise-message>
    <!-- Override auto resetting delay -->
    <promise-message when="rejected" auto-reset-delay="1500">Rejected</promise-message>
</promise-messages>

Contribution

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D