Question

背景

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

这个问题有点陈旧，但我只是绕过它。

问题是Angularjs基于所谓的摘要周期。更改模型或视图时，将触发摘要周期，分别注意更改并更新模型或视图。它被称为two way data binding。

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

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

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

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

正在工作但被视为棱角分明的反模式并且受到角色团队的劝阻，你应该使用：

$timeout();

代替。有关详细信息，请参阅this answer。

我可能会考虑将$timeout()调用添加到hook以进行插入，更新，删除挂钩或事件。也许pouchDB sync可能会有所帮助。

Answer 2

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

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

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

3 个答案: