Angularjs 视图不反映从 pouchDB 检索到的数据（在浏览器数据库中）答案

【问题标题】：Angularjs view not reflecting the data retrieved from pouchDB (in browser database)Angularjs 视图不反映从 pouchDB 检索到的数据（在浏览器数据库中）
【发布时间】：2015-12-08 06:09:04
【问题描述】：

背景：

我正在构建我的离线应用程序，它使用 AngularJS 作为 UI，使用 PocuhDB 本地存储从服务器检索到的数据。

问题：

从 PouchDB 检索的数据未在 UI 中呈现。

控制器：

$scope.retrieveView = function (sys, code, majorVer, minorVer) {
    var promise;
    promise = dataService.getDataFromLocalDb().then( 
       function(dataFromPouchDb){            
        $scope.data = dataFromPouchDb.data;
    });

    return promise;
  }

然后在 UI 代码中我有以下内容：

<h1> {{data}}</h1>

我已经调试了代码，一切似乎都运行良好。但是数据没有显示在 UI 中。

如果我将值硬编码到数据字段中，那么它会在 UI 中呈现

$scope.data ="TEST";

【问题讨论】：

看起来您没有关闭 ( ) 的 then 调用。
DTing，显示的代码不是真正的代码..我用它来解释这个问题。不管怎样，我已经修改了代码。
当我添加以下代码时代码开始工作： if(!$scope.$$phase) { $scope.$digest(); } 。但我不知道这段代码有什么魔力。如果有人可以提供建议，那将是一个很大的帮助。

标签： angularjs pouchdb

【解决方案1】：

这个问题有点老了，但我刚想出来。

问题是 Angularjs 基于所谓的摘要循环。当您的模型或视图发生更改时，摘要周期被触发，请注意更改并分别更新模型或视图。它就是所谓的two way data binding。

这个摘要循环不是在某个时间基准上定期触发的，而是在事件上触发的。这些事件是角度指令，如 ng-click、ajax 调用 $http 或其他一些角度事件，如 $timeout。你可以找到更多关于摘要here的信息。

一般来说，在使用 Angular 应用程序时，您应该使用这些东西来避免这种情况。在某些情况下，这是不可能的，但就像您从数据库获取数据时一样。不会触发摘要循环，并且您的视图不会被角度更新。

解决方法是手动触发 $digest 循环。您描述的方式：

if(!$scope.$$phase) { 
   $scope.$digest(); 
}

正在工作，但被认为是 angular 反模式并且被 angular 团队劝阻，您应该使用：

$timeout();

相反。如需更多信息，请参阅this answer。

我可能会考虑添加$timeout() 调用以插入、更新、删除钩子或事件。也许pouchDB sync 可能会有所帮助。

【讨论】：

【解决方案2】：

您显示的代码似乎正确，也许您可以使用console.log() 来跟踪数据的进度。我认为问题可能不在这一层。可能在你包裹getDataFromLocalDb()的区域，追踪数据是否已经转移到这里，或者消失在哪里。

【讨论】：

它肯定是从 pouchDB 中挑选数据。我已经调试了代码并看到了数据。但由于某种原因，设置为 Angularjs 范围字段时检索到的数据没有反映在 UI 中。
当我添加以下代码时代码开始工作： if(!$scope.$$phase) { $scope.$digest(); } 。但我不知道这段代码有什么魔力。如果有人可以提供建议，那将是一个很大的帮助。
我搜索了一些东西，“$$phase 是一个标志集，而 angular 处于 $digest 循环中。”，$scope.$digest(); 调用 $digest 循环。我认为这是因为js 中的数据已经改变，但在 UI 中没有。所以它应该调用$digest循环来检查数据绑定的变化。

【解决方案3】：

当我添加以下代码时，代码开始工作：

if(!$scope.$$phase) { 
    $scope.$digest(); 
}

但我不知道这段代码有什么魔力。
如果有人能提供建议，那将是一个很大的帮助。

现在可以使用的完整代码是：

$scope.retrieveView = function (sys, code, majorVer, minorVer) {
        var promise;
        promise = dataService.getDataFromLocalDb().then( 
           function(dataFromPouchDb){            
            $scope.data = dataFromPouchDb.data;
    if(!$scope.$$phase) { 
        $scope.$digest(); 
    } 

        });

  return promise;
}

【讨论】：