Ionic/Angular $watch 在 promise 函数填充来自 pouchdb 的数据之前触发的问题

Question

我真的不知道从哪里开始描述这个问题。在互联网上寻找一些信息非常困难。

我有这个 Ionic 应用程序（使用 AngularJS）将数据保存到 PouchDB 本地数据库。

在主页面上，我有一个嵌套视图，左列（第一个控制器）包含以前保存的数据列表，中间列（第二个控制器）包含用户选择的项目的详细信息从左边开始。

这就是问题所在：当用户单击左栏中的一项时，页面中央会启动一个新控制器，该控制器应显示详细信息，但显示的输入为空。再次点击相同的项目，所有输入都被填充。

我已将 $watch 添加到加载的变量中，记录值，并且我也在回调函数中完成了该操作。当用户第一次点击时，结果如下：

($watch) myvar has changed from undefined to undefined
(setValues) myvar.name: test

这是我再次单击时发生的情况：

($watch) myvar has changed from undefined to _id: 8ee32942-1c61-865b-2cd0-8d5b3d4a3082; name: test

加载左侧的项目时也会出现同样的问题。

我从本地 PouchDB 加载数据。我没有实际查询数据库，而是尝试用

替换它

return Promise.resolve({'_id': 'test001', 'name': 'test'});

猜猜是什么...有效！

那么现在的问题是：问题出在哪里？是控制器吗？是pouchdb吗？是离子框架吗？是加载功能吗？

最后是一些代码：

$scope.$watch('myvar', function( newValue, oldValue ) {
  console.log('($watch) myvar has changed from ' + printMyvar(oldValue) + ' to ' + printMyvar(newValue));
});

var printMyvar = function (var_to_print) {
  var s = 'undefined';
  if (var_to_print) {
    s = '_id: ' + var_to_print._id;
    s += '; name: ' + var_to_print.name;
  }
  return s;
}

var setValues = function (doc) {
  console.log('(setValues) name: ' + doc._id);
  $scope.myvar = doc;
};

$scope.isNew = ($stateParams.extId === 'new');

if ($scope.isNew) {
  $scope.myvar = { '_id': '', 'name': '' };
}  
else {
  Database.get( $stateParams.extId )
    .then( setValues )
    .catch( $scope.logError );
}

Answer 1

请阅读第 为什么

https://github.com/angular-pouchdb/angular-pouchdb

PouchDB 是异步的，您通常需要在更改反映在 UI

之前调用 $scope.$apply()

angular.controller('MyCtrl', function($scope, $window) {
  var db = $window.PouchDB('db');
  db.get('id')
    .then(function(res) {
      // Binding may/may not be updated depending on whether a digest cycle has
      // been triggered elsewhere as Angular is unaware that `get` has resolved.
      $scope.one = res;
    });

  var db2 = $window.PouchDB('db2');
  db.get('id')
    .then(function(res) {
      $scope.$apply(function() {
        // Value has been bound within Angular's context, so a digest will be
        // triggered and the DOM updated
        $scope.two = res;
      });
    });
});

Ionic/Angular $watch 在 promise 函数填充来自 pouchdb 的数据之前触发的问题

Issue with Ionic/Angular $watch fired before promise function filling data from pouchdb

javascript

angularjs

ionic-framework

promise

pouchdb