2016-08-24 2 views
0

ich dieses Tutorial im Anschluss an eine ionische App zu erstellen, die Sync-Daten throw PouchDB und CouchDB: http://frontmag.no/artikler/utvikling/offline-data-synchronization-ionicAngular Fabrik nie genannt (Ionic + PouchDB + CouchDB)

Aber die App nicht mit mir zu 100% nicht funktioniert. Die Eingabeaufforderung fügt das Dokument auf meiner Pouchdb hinzu und es wird mit CouchDB synchronisiert.

Das Problem ist auf meiner Schnittstelle, die nicht die neue TODO zeigt. So Debugging Ich fand heraus, dass nie console.log("change"); innerhalb app.factory('PouchDBListener', ['$rootScope', function($rootScope) { nie aufgerufen wird.

// Ionic Starter App 
var localDB = new PouchDB("todos"); 
var remoteDB = new PouchDB("http://192.168.0.16:5984/todos"); 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 
var app = angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 

    localDB.sync(remoteDB, {live: true, retry: true}); 

    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}); 


// For more information about $broadcast and factories, you can check AngularJS docs. 

app.factory('PouchDBListener', ['$rootScope', function($rootScope) { 
    localDB.changes({ 
    continuous: true, 
    onChange: function(change) { 

     console.log("change"); 

     if (!change.deleted) { 
     $rootScope.$apply(function() { 
      localDB.get(change.id, function(err, doc) { 
      $rootScope.$apply(function() { 
       if (err) console.log(err); 
       $rootScope.$broadcast('add', doc); 
      }) 
      }); 
     }) 
     } else { 
     $rootScope.$apply(function() { 
      $rootScope.$broadcast('delete', change.id); 
     }); 
     } 
    } 
    }); 
    return true; 
}]); 


app.controller("TodoController", function($scope, $ionicPopup, PouchDBListener) { 
    $scope.todos = [ 
    { 
     "title": "Item 1", 
     "done": false 
    }, 
    { 
     "title": "Item 2", 
     "done": false 
    }, 
    { 
     "title": "Item 3", 
     "done": false 
    } 
    ]; 

    $scope.create = function() { 
    $ionicPopup.prompt({ 
     title: 'Enter a new TODO', 
     inputType: 'text' 
    }) 
    .then(function(result) { 
     if(result) { 

     //console.log("I'm here 1"); 

     if($scope.hasOwnProperty("todos") !== true) { 
      //console.log("I'm here 2"); 
      $scope.todos = []; 
      //console.log("I'm here 3"); 
     } 

     //console.log("I'm here 4"); 

     localDB.post({title: result, done: false}).then(function(result) { 
      //console.log("I'm here 5"); 
      return localDB.get(result.id); 
     }).then(function(result) { 
      console.log(result); 
     }); 

     //console.log("I'm here 6"); 

     } else { 
     console.log("Action cancelled."); 
     } 
    }); 
    } 

    $scope.update = function(todo) { 
    localDB.put({ 
     _id: todo._id, 
     _rev: todo._rev, 
     title: todo.title, 
     done: todo.done 
    }) 
    .then(function(result){ 
     // You can set some action after the item was updated. 
    }); 
    } 

    $scope.$on('add', function(event, todo) { 
    var add = true; 
    angular.forEach($scope.todos, function(value, key) { 
     if (value._id == todo._id) { 
     $scope.todos[key] = todo; 
     add = false; 
     return; 
     } 
    }); 
    if (add) { 
     $scope.todos.push(todo); 
    } 
    }); 

    $scope.$on('delete', function(event, id) { 
    for(var i = 0; i < $scope.todos.length; i++) { 
     if($scope.todos[i]._id === id) { 
     $scope.todos.splice(i, 1); 
     } 
    } 
    }); 
}); 

My result so far.

Antwort

1

Ich habe gerade die Lösung. Meine PouchDB ist vielleicht in einer anderen Version. So habe ich die Änderung behandelt, wie es auf https://pouchdb.com/guides/changes.html gezeigt wird:

localDB.changes({ 
    continuous: true, 
}).on('change', function(change) { 

    console.log("change 2"); 

    if (!change.deleted) { 
    $rootScope.$apply(function() { 
     localDB.get(change.id, function(err, doc) { 
     $rootScope.$apply(function() { 
      if (err) console.log(err); 
      $rootScope.$broadcast('add', doc); 
     }) 
     }); 
    }) 
    } else { 
    $rootScope.$apply(function() { 
     $rootScope.$broadcast('delete', change.id); 
    }); 
    } 

}).on('error', function (err) { 
    // handle errors 
});