Introducing the async-bind directive

Subscribe to an observable and render different markup depending on the observable's state.

Example with all four states defined:

Here, angular-observe will convert $scope.observable into an Observable and subscribe to that observable.

<div async-bind="observable">
    <loading>Loading...</loading>
    <active>The latest value is: <code>{{$value}}</code>.</active>
    <complete>The observable completed. It's final value was <code>{{$value}}</code>.</complete>
    <error>The observable fired an error with the message: <code>{{$error.message}}</code>.</error>
</div>

Example using only the implicit active state and default scope alias

<div async-bind="observable">
    <span>Current value: <code>{{$value}}</code></span>
</div>

Example using only the implicit active state and a custom scope alias

<div async-bind="observable as currentValue">
    <span>Current value: <code>{{currentValue}}</code></span>
</div>

Example traversing a tree of higher-order Observables

<div async-bind="currentUser$.posts$.0.title as latestBlogTitle">
    <span>The current user's latest blog post as the title: {{latestBlogTitle}}</span>
</div>

How it works

The observe directive will subscribe to an Observable and will render different content depending on the state of that Observable. The different states are as follows:

Each of the following states can have its own markup nested in an element with the same name as the state. For example, to show the current value, you would use:

<div async-bind="observable">
    <active>Currrent value: {{$value}}</active>
</div>