Question

Angular's $q documentation表示“$ q promises被角度模板引擎识别，这意味着在模板中，您可以将附加到范围的承诺视为结果值。”

Angular的视图模板还允许您评估表达式，这意味着您可以调用从作用域公开的函数。

我发现视图模板能够引用实际值，promises（最终解析为实际值），或返回实数值的函数，而不是返回promises的函数，这些函数总是将{}呈现为视图模板。

任何人都可以做得更好或引导我朝着正确的方向前进吗？

（也许在视图模板中使用一个函数是一个坏主意;这个技术还有其他问题，因为Angular观察函数无法在不调用函数的情况下判断它是否已更改，因此观察到的函数会在每个函数中得到评估摘要周期。我见过这些two questions，在这两个版本中，建议的答案是使用promise.then更改范围的正常属性，并让视图模板观察正常属性而不是promise。我得到了，但是对于我的使用，我想提供一些参数来计算一个值，并且直接在视图模板中提供这些参数很方便。基本上我正在尝试在{{url_for}中编写类似url_for的东西。 {3}}或Flask。）

Answer 1

我不太确定，但是如果你将一个承诺作为属性的对象返回，它就可以了。 (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>

Answer 2

承诺表示未来值，通常是异步操作的未来结果，并允许我们定义一旦该值可用或发生错误时将发生什么。

<强>参考

var promise = asyncFunction(parameters); 

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

您可以使用实用程序方法$q.when()使用promise包装任何值。

$ q.when（承诺）→承诺
$ q.when（nonPromise）→新承诺，
异步解析为给定值nonPromise。

<强> ==============================

在你的例子中：

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;
    };
}

演示Fiddle

Angular模板调用函数可以返回promise

2 个答案: