0

私の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変数が更新されている場所が角度範囲内にない場合に使用する必要があることを理解しています。コールバック中に角度スコープは存在しませんか?

データは取得されてコンソールに記録されますが、別のルートをクリックしてから再び戻るまでビューに表示されません。

プロミス/コールバックについての私の理解はまだしっかりしていません。問題はコールバックの誤った処理によるものですか?

4

1 に答える 1

2

問題は、Angular が $scope (つまり$scope.alldata = data;) に加えられた変更を認識していないことです。

コントローラーで行われた変更は$scopeすぐに更新されますが、コードはコールバック内にあります。Angular は、コールバックが発生する前にコントローラーの最後に到達するため、ダイジェスト サイクルに失敗します。コールバックが呼び出されたことを認識できません。

コールバックでを更新している間$scope、新しいダイジェスト サイクルはトリガーされません。

dexiedbは を使用していないようです。$httpしたがって、この場合は を使用する必要があります$scope.$apply。を含む$http の angular の実装を見ることができます$apply。

于 2016-06-17T18:28:41.473 に答える