Question

我的角度应用程序/需要双向数据绑定。

我使用angular服务从indexedDB获取数据，该服务注入控制器。

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

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

从db

获取数据的服务

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;

 });

我知道如果更新变量的位置不在角度范围内，则应使用$scope.apply。虽然在回调中不会出现角度范围？

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

我对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

1 个答案: