diff --git a/index.html b/index.html index 9022ba1..13b931f 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

by Barak Chamo

Tweet   - +
@@ -34,7 +34,7 @@

by Barak Chamo

-
+

ngPromiseStatus is a collection (starting with statusButton) of promise-aware Angular directives that make it easy to bind UI elements to the progress and eventual outcome of a promise.

@@ -43,18 +43,18 @@

Examples

Simple usage

-

This is a simplest use of the directive with only a promise (or array of) passed (and some default styles). See valid values for promises

+

This is the simplest use of the directive, with only a promise (or array of) passed (and some default styles). See valid values for promises


- Success + Success
- Error + Error
@@ -93,7 +93,7 @@

Custom Status Classes



Promise Values

-

The directive exposes several scope properties to the button's content (see docs). You can use them to give extra info on the promise's status.

+

The directive exposes several scope properties to the button's content (see docs). You can use them to give extra info on the promise's status.


@@ -117,7 +117,7 @@

Promise Values

- +

@@ -136,14 +136,14 @@

Example with custom classes and promise values

I'm here, trigger the success button above.

- + - Wait for it... - Woohoo! - Bummer... + Wait for it... + Woohoo! + Bummer... {{$value}} - +
@@ -153,14 +153,14 @@

Example with custom classes and promise values

Me too, trigger the error button above.

- + - Wait for it... - Woohoo! - Bummer... + Wait for it... + Woohoo! + Bummer... {{$value}} - +
@@ -170,14 +170,14 @@

Example with custom classes and promise values

This one is for a value promise, try the button in the first row.

- + - Wait for it... - Woohoo! - Bummer... + Wait for it... + Woohoo! + Bummer... {{$value}} - +
@@ -186,7 +186,7 @@

Example with custom classes and promise values



Documentation

- +

You can install through bower:

@@ -197,7 +197,7 @@ -

To get started include ngPromiseStatus as a dependency in your angular app:

+

To get started, include ngPromiseStatus as a dependency in your angular app:

var app = angular.module('myApp', ['ngPromiseStatus']);

and you're good to go!

@@ -238,7 +238,7 @@

CSS Classes

error
The promise was rejected.
- +

ngPromiseStatus intentionally doesn't rely on any additional CSS files or required styling. It provides an easy interface in the form of class management that allows you to easy interact with promises using your existing styles and with no additional bloat to your project.


@@ -296,17 +296,17 @@

Basic Use See default classes

Result:

- Success + Success

Template:

-<status-button 
-  ng-click="setSuccessPromise()" 
+<status-button
+  ng-click="setSuccessPromise()"
   promise="successPromise">
-  <span>Success</span> 
+  <span>Success</span>
 </status-button>
                   

Controller:

@@ -353,25 +353,25 @@

Custom Configuration

idle_class string idle - The initial class applied to the button and will applied after completion if a delay is specified. + The initial class applied to the button. Will be applied after completion if a delay is specified. progress_class string inprogress - The class that will be applied to the button whenever a promise is in progress. + The class applied to the button when a promise is in progress. success_class string success - The class that will be applied to the button when a promise is resolved (completed successfully). + The class applied to the button when a promise is resolved (completed successfully). error_class string error - The class that will be applied to the button when a promise is rejected (resulted in an error). + The class applied to the button when a promise is rejected (resulted in an error). progress_disable @@ -403,11 +403,11 @@

Custom Configuration

Template:

-<status-button 
-  ng-click="setButtonPromise()" 
+<status-button
+  ng-click="setButtonPromise()"
   promise="buttonPromise">
   options="buttonPromise">
-  <span>Success</span> 
+  <span>Success</span>
 </status-button>
                   

Controller:

@@ -464,9 +464,9 @@

Scope Properties Available scope properties

Template:

-<status-button 
-  ng-click="setButtonPromise()" 
-  promise="buttonPromise" 
+<status-button
+  ng-click="setButtonPromise()"
+  promise="buttonPromise"
   options="bootstrapConfig">
   <span>Success {{$value}}</span>
 </status-button>
@@ -484,7 +484,7 @@ 

Scope Properties Available scope propertiesstatusBar see some examples

Just like the statusButton, the statusBar directive can be easily put to work as a tag or attribute and passing a promise (or array of). See valid values for promises

When a promise is set and re-set a promise handler is assigned. This is managed by watching the promise passed but other hooks will soon be implemented.

- +
@@ -553,9 +553,9 @@

Usage with Bootstrap classes and conditional content.

Result:

- Give it a go! + Give it a go! - +

@@ -564,11 +564,11 @@

Usage with Bootstrap classes and conditional content.

- Wait for it... - Woohoo! - Bummer... + Wait for it... + Woohoo! + Bummer... {{$value}} - +

@@ -576,37 +576,37 @@

Usage with Bootstrap classes and conditional content.

Bar Template:

 <status-bar class="alert"
-  promise="examplePromise" 
+  promise="examplePromise"
   options="alertConfig">
   <span ng-switch="$status">
     <strong ng-switch-when="inprogress">
       Wait for it...
-    </strong> 
+    </strong>
     <strong ng-switch-when="success">
       Woohoo!
-    </strong> 
+    </strong>
     <strong ng-switch-when="error">
       Bummer...
-    </strong> 
-    
+    </strong>
+
     {{$value}}
-  </span> 
+  </span>
 </status-bar>
                   

Button Template:

-<status-button 
-  ng-click="setExamplePromise()" 
+<status-button
+  ng-click="setExamplePromise()"
   promise="examplePromise">
-  <span>Give it a go!</span> 
+  <span>Give it a go!</span>
 </status-button>
                   
- + @@ -632,4 +632,4 @@

Usage with Bootstrap classes and conditional content.

- \ No newline at end of file +