如何在 Angular 中将 Promise 作为指令属性传递答案

【问题标题】：How do I pass promises as directive attributes in Angular如何在 Angular 中将 Promise 作为指令属性传递
【发布时间】：2013-06-18 02:18:27
【问题描述】：

我想设置一个承诺，然后将其放入指令中（使用数据绑定 '=' 属性类型）并在指令中执行 then 魔术，但将承诺作为属性传递似乎会导致在被解析为undefined 的承诺中，因此then（以及任何其他承诺功能）不可用。

【问题讨论】：

【解决方案1】：

我怀疑这是由于这个特定的调整：

$q Promise 被模板引擎以 Angular 识别，这意味着在模板中，您可以将附加到范围的 Promise 视为结果值 - angular $q docs

这实质上导致在模板中将承诺转换为承诺用于存储结果值的$$v 值，并且在链接阶段这可能仍然是未定义的 - 转换后的值（即未定义)，而不是 Promise 本身被传递到指令中。

解决方法是不要使用 Promise 本身作为传递给指令的属性，而是使其成为父对象的一部分：父对象不会有 $q/template 引擎魔法运行，因此您将能够深入了解父级的承诺并从那里访问then 功能。

查看http://jsfiddle.net/cebjyre/95sjT/ 的示例 - 取消注释第 32 行将导致失败，因为此时顶级承诺实际上不再是承诺，而第 17 行的第二级承诺可以正常工作

【讨论】：

感谢您的帮助。不过，这对 Angular 来说是一个非常讨厌的缺陷——它直接在视图中透明地处理对 Promise 的绑定，而不是在模板中。所以现在即使你想传入直接数据，你也必须将它包装在一个 Promise 和一个包装器对象中。现在我的指令模板充满了像{{itemList.promise[index]}}这样的丑陋。指令并不像我想要的那样无缝。
来自 Angular 1.2 的 promise 不再被模板引擎识别

【解决方案2】：

谢谢。我已将此添加到 Angular 文档中。

要实现这一点，请将您的承诺包装在父级中： $scope.myDirectiveAtrribute = {promise: deferred.promise} 然后在指令访问承诺

$scope.myDirectiveAtrribute.promise.then(function(){});

【讨论】：

我也在 Angular 1.5 组件中使用了这种策略。我使用了 angular.element(document).ready() ，然后从 ready 回调中访问了 Promise。可能是一个使用指令而不是组件的用例，但它确实有效。