AngularJS 承诺答案

【问题标题】：AngularJS promiseAngularJS 承诺
【发布时间】：2012-12-14 08:14:52
【问题描述】：

AngularJS 文档say:

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

那么有人可以解释一下fiddle 不起作用的原因吗？无法更改文本字段值。但是，将 $http 服务返回到范围字段的承诺分配起来就像一个魅力。

控制器：

function MyController($scope, $q, $timeout) {
    this.getItem = function () {
        var deferred = $q.defer();
        deferred.resolve({
            title: 'Some title'
        });
        return deferred.promise;
    };

    $scope.item = this.getItem();
}

HTML：

<input type="text" ng-model="item.title">

【问题讨论】：

你能告诉我你是如何分配一个由 $http 返回的承诺，它按照你想要的方式工作吗？
@Dogbert，这里是用来说明我在说什么的伪代码：$scope.item = $http({method: 'post', url: '/find/my/item/'}) .then(function (response) { return response.item; }); 另一个使用 $resource 方法的例子可以在这个tutorial 中找到。从线路开始：Notice how in PhoneListCtrl we replaced ... with $scope.phones = Phone.query();
糟糕，刚刚创建了test example，它似乎不适用于任何承诺
大家好，要让它工作，我必须使用.success(function(){}).then(function(r){if (r.data["my-result"])return r.data["my-result"];});

标签： angularjs angular-promise

【解决方案1】：

你需要在 promise 对象上使用 then() 函数：

this.getItem().then(function(result) {
   $scope.item = result;
});

在你的情况下，我认为你不需要承诺。 Angular 的 $watch 系统会处理这些事情。 Just return an object in your function, not a primitive type:

this.getItem = function () {
    var item = {};

    // do some async stuff
    $http.get(...).success(function(result) {
       item.title = result;
    });
    return item;
};

$scope.item = this.getItem();

【讨论】：

我知道你的意思。我已经更新了我的答案。你必须让 Angular 来处理它（它会通过它的 $watch 系统自动完成）。
您给出的第二个示例看起来并不比第一个简单；）此外，它不会按预期工作，因为 $http.get() 将使用代表 的 json 解析item ，而不仅仅是 title 所以this.getItem().then(function(result) { $scope.item = result; }); 看起来很可以接受（我只是将 this.item = result 更改为 $scope.item = result）
啊，确实这应该是范围。我会更改它，以便您接受它。
我不确定这是否解决了 AngularJS 声称承诺可以在绑定期间使用的事实，就好像它们是结果一样......文档仍然这么说，我想知道为什么他的代码没用。也许只有在模板完成消化后延迟解析才有效？在返回 Promise 之前同步解析并不典型。

【解决方案2】：

我相信你的第一个小提琴不起作用的原因是因为你本质上是将范围属性 item 绑定到一个承诺。当您尝试通过在文本字段中键入来更改值时，angular 会注意到活动，然后将 item 的值重新分配/重置为承诺的结果（未更改）。

@asgoth 提供的解决方案在 promise 解决时设置/分配一次 item 的值。这里没有绑定（即item 未绑定到承诺），因此通过文本框更改值确实会更改值。

【讨论】：

【解决方案3】：

就像@Mark 说的，在这里你可以找到你的sn-p 的Working Example。

基本上，您返回的是一个对象，而不是绑定模型本身。

$timeout(function(){
   $scope.item = {
      title: 'Some title'
   }; // Apply the binding
   deferred.resolve(); // Resolve promise
},2000); // wait 2 secs

【讨论】：

JavaScript 的最后一行应该是this.getItem();。