An intuitive way to re-confirm user intentions using a single widget, and provide inline feedback without distracting confirmation popups or flash messages.
Allows you to decorate a standard HTML button with 2 or 3 states, to allow the user to re-confirm their intent before performing a destructive or important operation. Can also be used to simply confirm or feedback an action to the user on the same button they clicked. If you define it with 3 states, the directive will reset the state back after a time period (configurable).
This behaviour allows you to conserve space on the current view, without taking the users attention away from what they are currently doing and avoids distracting confirmation popups and flash messages.
Tested and can be used with / without JQuery / Bootstrap.
Demo / Example
- Install the plugin into your Angular.js project, manually or via:
bower install angular-confirmable --save
angular-confirmable.cssin your app (optional, this demonstrates CSS class customisation using Bootstrap):
<link rel="stylesheet" href="bower_components/angular-confirmable/angular-confirmable.css" />
angular-confirmable.jsin your app:
angular-confirmableas a new module dependency in your angular app.
var myapp = angular.module('myapp', ['angular-confirmable']);
Creating the Directive
- Define a
<confirmable ...></confirmable>tag with matching open and closing tags.
- Nested within the above open and closing tags, define a
<confirmable-outlet></confirmable-outlet>which will mark where the dynamic text appears. This allows the directive to be very flexible in what you wrap around it (ie. button / div / whatever).
- Define the default (unconfirmed) text with
unconfirmed-text="Do something irreversable"
- Define the text to show after a single click (confirming) with
confirming-text="Are you sure?"
- Optionally, define the text to show after a confirmation click (confirmed) with
- Define a function (on the target controller scope) to be called after confirmation:
Complete (minimal) example:
<confirmable when-confirmed="confirmed" unconfirmed-text="Don't press this button" confirming-text="Please don't click me again!"> <button class="btn btn-default"> <confirmable-outlet></confirmable-outlet> </button> </confirmable>
You can use either the SASS styles directly file under
/srcor the compiled CSS files, up to you :)
You can use this directive for either a re-confirmable action (3 states) or inline feedback (2 states) or both.
You can wrap the text in all states within brackets, or anything really using the following optional attributes:
You can define the delay between reverting from
defaultstate by specifying
disabled="true|false"attributes an acts as you would assume.
confirmable-statewill change to either
confirmedwhich can be used. for CSS class styles or watching on the
$scopeto trigger other effects.
Specifically tested with the angular-ladda directive in mind, so it is compatible with this applied to the same button.
- Checkout git repository locally:
git clone firstname.lastname@example.org:rpocklin/angular-confirmable.git
http://localhost:9000/example/in your browser to see the example.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature)
- Make your changes, run
grunt karmato ensure all tests pass. (Ideally add more tests!)
- Commit your changes (
git commit -am 'Added some feature')
- Push to the branch (
git push origin my-new-feature)
- Create a new Pull Request
1.1.0 Allow directive to be used in attributes as well as elements. 1.0.0 Initial release
- Add disabled button toggle to example
- Add some tests
- Add ngdocs
- Move directive sanity checks to
- More sophisticated examples, also one with
- Allow the confirmed state to pass a promise which, when resolved, will show
Released under the MIT License. See the LICENSE file for further details.