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

Question

背景：

我正在构建我的离线应用程序，它使用 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";

Answer 1

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

Answer 2

当我添加以下内容时，代码开始运行：

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;
}

Answer 3

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

问题是 Angularjs 是基于所谓的摘要循环。当您的模型或视图发生更改时，将触发摘要循环，分别观察更改和更新模型或视图。就是所谓的two way data binding.

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

一般来说，你应该在使用 angular 应用程序时使用这些东西来避免这种情况。在某些情况下，这是不可能的，但是就像您从数据库获取数据时的情况一样。 angular.

未触发摘要周期，您的视图未更新

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

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

有效但被认为是 angular 反模式并且被 angular 团队 劝阻，你应该使用：

$timeout();

相反。有关详细信息，请参阅 this answer。

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

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

Angularjs view not reflecting the data retrieved from pouchDB (in browser database)

angularjs

pouchdb