<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>ASYNC Filter for AngularJS 1.x</h1>
<p>
Now that we have `async` in AngularJS 1.x, we no longer need Angular 2 :-)
</p>
<div ng-controller="Ctrl1">
<h2>Should resolve after 2 seconds:</h2>
{{p|async}}
<h2>Should emit a new number every second:</h2>
{{observable|async}}
</div>
<script src="http://code.angularjs.org/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.all.js"></script>
<script src="script.js"></script>
</body>
</html>
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl1', function($scope, $timeout) {
$scope.p = $timeout(angular.identity, 2000).then(() => 'Resolved :)');
$scope.observable = Rx.Observable.timer(1000, 1000).map(() => Math.random());
});
myApp.filter('async', function($rootScope) {
var hash = new WeakMap();
function asyncMe(value) {
if (hash.get(value)) {
return hash.get(value).result;
}
if (value.then && typeof value.then === 'function') {
hash.set(value, {result: null});
value.then(result => {
hash.set(value, {result: result});
});
return null;
}
console.log(value.subscribe);
if (value.subscribe && typeof value.subscribe === 'function') {
hash.set(value, {result: null});
value.subscribe(result => {
$rootScope.$apply();
hash.set(value, {result: result});
})
return null;
}
return value;
};
asyncMe.$stateful = true;
return asyncMe;
});
/* Styles go here */