Question

vm.promises = {
};

vm.addPromise = function(src) {
  if (!angular.isDefined(vm.promises[src])) {
    vm.promises[src] = $http.get(src).then(function(res) {
        console.log("returning data: " + res.data);
        return res.data;
            });
            console.log("created new promise");
  } else {
            console.log("using existing promise");
  }
  return vm.promises[src];
}

$scope.loadStuff = function(src) {
    console.log('loadStuff ' + src);
    return vm.addPromise(src);
};

----------------------------------- template:

<body ng-controller="MainCtrl">
    {{loadStuff('stuff.txt')}}
</body>

嗨，我试图将一个简单的承诺http加载到我的模板中（使用Angular 1.3），但有两个问题：

loadStuff函数被多次调用（我的chrome上有6个，plunkr里面）
即使我为多次加载调用重复使用相同的承诺，输出也是＆＃34; {}＆＃34;出于某种原因，虽然我可以在日志中看到数据本身是正确获取的

注意：在我的情况下，我不能使用ng-include。

Here's the plunkr，查看控制台日志，了解我的意思......

预期产量：加载一些东西

实际输出：

{}

如何让这件事起作用？

Answer 1

有些事情你做错了：

当你像在>>> n = '0xA5423' >>> n = format(int(n, 16), '016b')[::-1] # reversed >>> n '11000100001010100101' >>> int(n[0:2][::-1], 2) # need to reverse again to get proper value 3 >>> int(n[2:4][::-1], 2) 0 >>> int(n[4:12][::-1], 2) 66 >>> int(n[12:16][::-1], 2) 5中那样为变量分配承诺时，那个变量就是一个承诺。它没有填充回调函数返回的内容。在这种情况下，正确的方法是：
```
vm.promises[src] = $http.get(src).then(...
```
这样，通过它自己会给你你想要的结果（see here），但如果你打开开发人员工具，你会看到可怕的事情：$http.get(src).then(function(res) { console.log("returning data: " + res.data); vm.promises[src] = res.data; });被称为多次加载，并最终出现角度抛出无限的摘要循环错误。这是因为您从模板中调用stuff.txt。请参阅上面的@ Gustav的评论。这导致我们......
您不应将同步调用与异步调用混合使用。你调用loadStuff并期望它表现得像一个同步函数并立即返回一个值，而它的实现是调用一个异步函数。这里的正确方法是让控制器调用异步函数一次，在结果返回后存储返回的值，并在模板中显示存储的值。请参阅一个简单示例here。

angular：如何将promise加载到模板中？

1 个答案: