在 AngularJS 中使用来自 pouchDB 的数据设置 $scope 变量的值答案

【问题标题】：Setting the value of a $scope variable with data from pouchDB in AngularJS在 AngularJS 中使用来自 pouchDB 的数据设置 $scope 变量的值
【发布时间】：2014-11-09 11:26:55
【问题描述】：

我有这个 AngularJS 工厂。

angular.module('app.factories', [])
.factory('ProgressDBFactory', function () {
    var factory = {};
    var pouchDb = new PouchDB('ProgressDB');

    factory.getAllData = function() {
        var dbOptions = {};
        dbOptions.include_docs = true;

        return pouchDb.allDocs(dbOptions).then(function(res) {
            return res.rows;
        });
    };

    return factory;
})

我需要使用来自 pouchDb 的数据在我的控制器中设置 $scope.progressData。我的控制器看起来像这样。

.controller('ProgressController', function($scope, ProgressDBFactory) {

    $scope.progressData = {};

    var progPromise = ProgressDBFactory.getAllProgressData();

    progPromise.then(function(res) {
        $scope.progressData = res;
        console.log($scope.progressData); // POINT A <= Here it prints all the results from the database.
    });

    console.log($scope.progressData); // POINT B <= here it just prints an empty object

})

在 A 点，它正确地打印了数据库中的结果。但在 POINT B 中，它打印一个空对象。此外，在打印 POINT A 之前，在控制台中打印 POINT B。这向我表明 POINT B 是在承诺完成执行之前执行的。我对吗？我是 javascript 新手，这对我来说没有意义。有人可以澄清这一点并给出解决方案。请帮忙

【问题讨论】：

我假设“getAllProgressData”是指工厂中的“getAllData”函数。
不仅如此，我似乎您的代码正在两次解析承诺，并且工厂同时返回了承诺和已解决的承诺（在 then 内部）。但是，如果您在“POINT A”中打印数据，它是否仍然显示在视图（html）中？
我制作了这个简单的 jsFiddle jsfiddle.net/5j0kf0eo/1 以表明，至于为视图生成值，您的代码应该已经可以工作了。
问题是我需要将我从 IndexedDb 获取的数据输入到图表中，然后将该图表设置为绑定到 HTML 视图的控制器中的 $scope 变量。由于 $scope.progressData 在外部不可用（在 POINT B 及以后），我无法通过处理从数据库中获取的值来设置其他 $scope 变量
恐怕我仍然没有清楚地看到问题，您应该公开更多代码来实现您想要实现的目标...... progressData 变量 is 可用于整个$范围。如果处理数据库中的最新值，则在回调中执行它们。我现在更新了小提琴以显示连续的投票数据jsfiddle.net/5j0kf0eo/2

标签： javascript angularjs angularjs-scope promise pouchdb

【解决方案1】：

点 B 总是发生在点 A 之前，因为点 A 被包装在从异步调用（承诺）到 DB 的回调中。就执行顺序而言，您的代码没有任何问题。尽管您可能必须将您的范围分配包装在 $apply 中，因为您是在 Angular 上下文之外执行它（据我所知，它是来自第 3 方库的回调）。

progPromise.then(function(res) {
    $scope.$apply(function() {
       $scope.progressData = res;
       console.log($scope.progressData); // POINT A <= Here it prints all the results from the database.
    })
});

有关 $apply 的更多信息：AngularJS Docs

【讨论】：

感谢您的回答，但没有奏效。不是 $scope.apply() 中的日志消息不会打印到控制台。

【解决方案2】：

(function(scp){
	progPromise.then(function(res) {
        scp.progressData = res;
        console.log(scp.progressData); // POINT A <= Here it prints all the results from the database.
    });
	console.log($scope.progressData);
    
})($scope);

希望这可能有效。

【讨论】：

【解决方案3】：

(function(scp){
	progPromise.then(function(res) {
        scp.progressData = res;
        console.log(scp.progressData); // POINT A <= Here it prints all the results from the database.
    });
	console.log($scope.progressData);
    
})($scope);

【讨论】：

它不起作用兄弟，同样的结果。你能告诉我一个等到承诺完成的方法吗？