javascript Angular 模板调用函数可以返回承诺吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19553297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can Angular template call function returning promise
提问by metamatt
Angular's $q documentationsays "$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 的 $q 文档说“$q 承诺被 angular 中的模板引擎识别，这意味着在模板中，您可以将附加到范围的承诺视为结果值。”
Angular's view templates also let you evaluate expressions, which means you can call functions exposed from the scope.
Angular 的视图模板还允许您评估表达式，这意味着您可以调用从作用域公开的函数。
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 twoquestionsand in both of them, the recommended 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 Flaskor Rails.)
（也许在视图模板中使用函数是个坏主意；这种技术还有其他问题，因为 Angular 在不调用函数的情况下无法判断函数是否已更改，因此在每个摘要循环中都会对被观察的函数进行评估。我已经看到这两个问题，并且在这两个问题中，推荐的答案是使用 promise.then 来更改作用域上的正常属性，并让视图模板监视正常属性而不是 promise。我明白了，但是对于我的使用，我想提供一些参数来计算一个值，并且直接在视图模板中提供这些参数很方便。基本上我试图在Flask或Rails 中编写类似 url_for 的东西。）
采纳答案by Jason Goemaat
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:
HTML：
<p>Function returning promise (object): {{ getPo().promise }}</p>
回答by Maxim Shoustin
A promiserepresents a future value, usually a future result of an asynchronous operation, and allows us to define what will happen once this value becomes 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().
您可以使用实用程序方法用 Promise 包装任何值$q.when()。
- $q.when(promise) → promise
- $q.when(nonPromise) → a new promise, that will
- asynchronously resolve to the given value nonPromise.
- $q.when(promise) → 承诺
- $q.when(nonPromise) → 一个新的承诺，即
- 异步解析给定值 nonPromise。
==============================
==============================
In your example:
在你的例子中：
HTML
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
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
演示小提琴
