Skip to content

Commit

Permalink
Add promise support in compute function
Browse files Browse the repository at this point in the history
* Updated README accordingly
  • Loading branch information
karolsluszniak committed Apr 1, 2015
1 parent 8ddbc39 commit b5bc167
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 13 deletions.
40 changes: 30 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,27 +83,47 @@ Then, you can use it in your view like this:
You can provide dependencies as strings with property names:

```js
$computed(this, 'sum', ['a', 'b', computeFunc]);
$computed(this, 'sum', ['a', 'b', computeFunc]);
```

Or, if you need more control, as functions:

```js
this.nested = { num: 31 };
this.nested = { num: 31 };

var local = 49;
var computeFunc = function(nestedNum, localNum) {
return nestedNum + localNum;
};
var local = 49;
var computeFunc = function(nestedNum, localNum) {
return nestedNum + localNum;
};

$computed(this, 'sum', [
function() { return this.nested.num; },
function() { return local; },
computeFunc]);
$computed(this, 'sum', [
function() { return this.nested.num; },
function() { return local; },
computeFunc]);
```

Guessing variable names from function signature, like Angular does in its DI, is not supported here. It would not work after minification and could create ugly bugs in your code.

### Computing the property

Compute function gets called when any of its dependencies change. It takes all dependencies as arguments and should return new property value:

```js
$computed(scope, 'descriptionIsLong', ['description', function(description) {
return (description.length > 512);
}]);
```

You can also return a promise from your compute function. This, for instance, makes it possible to use AJAX calls to compute your properties:

```js
$computed(scope, 'userName', ['userId', function(userId) {
return $http.get('/users/' + userId).then(function(response) {
return response.data.user.firstName + ' ' + response.data.user.lastName;
});
}]);
```

### Dependency chain

You can add computed properties that are dependent on other computed properties. In fact, this is where the pattern implemented by **$computed** really starts to shine with its performance benefits.
Expand Down
10 changes: 7 additions & 3 deletions angular-computed.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function() {'use strict';
angular.module('ngComputed', []).

service('$computed', ['$rootScope', function($rootScope) {
service('$computed', ['$rootScope', '$q', function($rootScope, $q) {
return function angularCmputed(context, name, properties) {
/* computed(this) in controller injects service into the controller context */
if (typeof context === 'object' && name === undefined) {
Expand All @@ -26,8 +26,12 @@
} else if (typeof item === 'function') {
return angular.bind(context, item);
}
}), function() {
context[name] = valueFunc.apply(context, arguments[0]);
}), function(newValues) {
var promise = $q.when(valueFunc.apply(context, newValues));

promise.then(function(response) {
context[name] = response;
});
});
};
}]).
Expand Down

0 comments on commit b5bc167

Please sign in to comment.