Angular's $q documentation says "$q promises are recognized by the templating engine in angular, which means that in templates you can treat promises attached to a scope as if they were the resulting values."

Angular's view templates also let you evaluate expressions, which means you can call functions exposed from the scope.

I've found that a view template is able to refer to real values, promises (which eventually resolve to real values), or functions returning real values, but not functions returning promises, which always render {} into the view template.

I created a fiddle with an example of this.

Can anyone do better or steer me in the right direction?

(Perhaps using a function in the view template is a bad idea; there are other problems with this technique, because Angular watching a function can't tell whether it's changed without calling the function, so the watched function gets evaluated on every digest cycle. I've seen these two questions and in both of them, the remended answer was to use promise.then to change a normal property on the scope, and have the view template watch the normal property instead of the promise. I get that, but for my use I want to supply some parameters to calculate a value, and it's convenient to supply those parameters directly in the view template. Basically I'm trying to write something like url_for in Flask or Rails.)

Angular's $q documentation says "$q promises are recognized by the templating engine in angular, which means that in templates you can treat promises attached to a scope as if they were the resulting values."

Angular's view templates also let you evaluate expressions, which means you can call functions exposed from the scope.

I've found that a view template is able to refer to real values, promises (which eventually resolve to real values), or functions returning real values, but not functions returning promises, which always render {} into the view template.

I created a fiddle with an example of this.

Can anyone do better or steer me in the right direction?

(Perhaps using a function in the view template is a bad idea; there are other problems with this technique, because Angular watching a function can't tell whether it's changed without calling the function, so the watched function gets evaluated on every digest cycle. I've seen these two questions and in both of them, the remended answer was to use promise.then to change a normal property on the scope, and have the view template watch the normal property instead of the promise. I get that, but for my use I want to supply some parameters to calculate a value, and it's convenient to supply those parameters directly in the view template. Basically I'm trying to write something like url_for in Flask or Rails.)

• javascript
• angularjs
• promise

2 Answers 2

I'm not exactly sure, but if you return an object with the promise as a property, it works. (fiddle)

var deferred2 = $q.defer();
$scope.po = { promise: deferred2.promise };
$scope.getPo = function() {
    return $scope.po;
};

$timeout(function() {
    deferred2.resolve('some lazy text');
}, 2000);

HTML:

<p>Function returning promise (object): {{ getPo().promise }}</p>

A promise represents a future value, usually a future result of an asynchronous operation, and allows us to define what will happen once this value bees available, or when an error occurs.

Reference

var promise = asyncFunction(parameters); 

promise.then( 
 function (result) { 
 // Do Something with the result 
 }, 
 function (error) { 
 // Handle error (exception, etc). 
 }); 

You can wrap any value with a promise, using the utility method $q.when().

• $q.when(promise) → promise
• $q.when(nonPromise) → a new promise, that will
• asynchronously resolve to the given value nonPromise.

==============================

In your example:

HTML

<div ng-app ng-controller="testController">
    <p>Direct property: {{ property }}</p>
    <p>Function returning property: {{ getProperty() }}</p>
    <p>Direct promise: {{ promise }}</p>
    <p>Function returning promise: {{ out }}</p>
</div>

JS

function testController($scope, $q) {
    var deferred = $q.defer();
    deferred.resolve('some lazy text');
    $scope.promise = deferred.promise;

    $scope.out = $scope.promise.then(function (result) {
        console.log(result);
        return result;
    });


    $scope.property = 'some text';
    $scope.getProperty = function () {
        return $scope.property;
    };
}

Demo Fiddle