Angular js双向数据绑定只适用于apply

Question

我的 angular 应用 has/needs 双向数据绑定。

我使用注入到控制器中的 angular 服务从 indexedDB 获取数据。

我需要在从数据库获取数据后更新视图。

var app = angular.module("app",["ngRoute"]);

app.config(['$routeProvider',function($routeProvider) {
    //removed extra routes for simplicity
    $routeProvider.when('/grouped',{
        templateUrl: 'template/grouped.html',
        }).otherwise({
        redirectTo: '/grouped'
    });
}]);

同一文件中的控制器

 app.controller("AppController",function ($scope,dexiedb) {
    $scope.datais={};
    $scope.dataisdata={};
    $scope.alldata = {};

    var scholar = {};

    var _db;
    window.initial = 0;
    var callback_alldata = function(err,data){
      if(!err){
      /* If I put apply it works*/
      // $scope.$apply(function() {
        $scope.alldata = data;
            // });
      }
    console.log('in callback_alldata ',err,data);
    };

    var init = function() {
      console.log('hi in init');
      dexiedb.getdata(callback_alldata);
      console.log($scope);
    };
  init(); 
 });

从数据库中获取数据的服务

app.service('dexiedb',function(){

  var createdData = {};
  var _db = null;

  var service = {};
  //Initialization code which makes connection
  service.init = function(){

  _db = new Dexie('puppets');
  _db.version(1).stores({
        snips: "++id, text",
        parent: "++id, title, timeStamp"
    });

   _db.open().then(function(){
      service.createdata();
      console.log('service.init then called');
     }).catch(function(e){
      console.log('error opening',e);
            });
  };
  //The actual place where data is fetched and returned
   service.createdata = function(callback){
      console.log('createdata');
        var alldata = [];
      _db.transaction('rw',_db.parent, _db.snips, function(){

        _db.parent.each(function(par){
          var r = {'parent':par,'snips':[]};
          _db.snips.where('URL').equals(par.URL).each(function(snip){
              r.snips.push(snip);
          });
          alldata.push(r);
          // console.log(alldata);
        }).then(function(){
          createdData = alldata;
          console.log('createdata',createdData);
          return callback(null,createdData);
          // return createdData;
        });
      });
    };
//The method which is called in the controller
service.getdata = function(callback){
  // console.log(createdData);
  if (Object.keys(createdData).length==0) {
    console.log('createdData was empty');
    return service.createdata(callback);
  } else return callback(null,createdData);
}

service.init();

return service;

 });

我知道如果更新变量的地方不在angular范围内，应该使用$scope.apply。在回调中不会出现 angular 范围吗？

数据已获取并记录在控制台中，但在我单击另一条路线然后再次返回之前，它不会显示在视图中。

我对promises/callback的理解还不够深入，是回调处理不当造成的问题吗？

Answer 1

问题是 Angular 不知道对 $scope 所做的更改（即 $scope.alldata = data;）。

在您的控制器中对 $scope 所做的更改将立即更新，但是您的代码在回调中。 Angular 在触发回调之前到达控制器的末尾，因此它错过了摘要循环。它不知道您的回调已被调用。

当您在回调中更新 $scope 时，不会触发新的摘要周期。

dexiedb 似乎没有使用 $http，因此在这种情况下您需要使用 $scope.$apply。您可以看到 angular's implementation of $http 其中包括 $apply.

Angular js双向数据绑定只适用于apply

Angular js two way data binding works only with apply

javascript

asynchronous

2-way-object-databinding

angularjs

dexie