AngularJS LocalForage CRUD创建问题

Question

我正在开发一个Ionic框架应用程序。我已经安装了LocalForage，我决定使用它作为脱机存储的本地存储解决方案。

下面是我在app.js中配置的app.js设置：

$localForageProvider.config({
    driver      : 'localStorageWrapper',
    name        : 'myApp',
    storeName   : 'keyvaluepairs',
    description : 'some description'
});

$localForageProvider.setNotify(true, true); // itemSet, itemRemove

接下来，我使用services.js文件中的以下代码创建了一个“表”来存储我的信息：

dataFactory.getUserProjects = function(){
    return $http.get(baseURL + 'getUserProjects.cfm').then(function(response) {
        // store locally so that we can access when we are offline
        return $localForage.setItem('userprojects', response.data).then(function() {
            //console.log("userprojects: ", response.data);
            return response.data;
        });
    }, function() {
        // the error indicates that we are offline -> get the locally stored list
        console.log("catch failed, get it locally");
        return $localForage.getItem('userprojects').then(function(item) {
            return item;
        });
    });
};

接下来，我在我的控制器中调用这个函数：

HoursService.getUserProjects().then(function(response){
        $scope.tags = response;
});

此页面是主细节模式的母版页.在详细信息页上，我再次“获取”$localForage对象并进行迭代，以获得需要在详细信息页上显示的单个文件：

// Get the userprojects and iterate through them to find the one we need
HoursService.getUserProjects().then(function(response){
    var data = response;
    angular.forEach(data, function(value, key){
        angular.forEach(value.Activity, function(value, key){
            if(value.RecordID == $rootScope.pageID){
                $scope.singleRecord = value;
            }
        });
    });
});

好吧，这一切都很好！问题是当我试图更新‘userproject’JSON对象时。我使用ng单击来调用和执行以下函数：

$scope.updateHours = function(index, id){
    console.log("I clicked delete");
    console.log("Index:" + $rootScope.outerID + ", " + "ID: " + $rootScope.pageID);

    $localForage.getItem('userprojects').then(function(item){
        console.log("My Item:", item);
        $scope.item = item;
        $scope.path = $scope.item[$rootScope.outerID].Activity[$rootScope.innerID];
        $scope.path.ActivityName = 'Magic Dolphin Event';

        $rootScope.$broadcast('LocalForageModule.setItem', {
            key: $scope.path,
            newvalue: $scope.path.ActivityName,
            driver: $localForage.driver
        });

        $state.go("tab.projects", {}, {reload: true});

    });
};

如果我在运行广播事件后设置了一个"console.log“来检查对象，我可以看到正确的字段已经更新，并变成了”魔力海豚事件“。好吧，太好了！

问题是当我导航或使用"$state.go“重定向回母版页面时。核心对象不更新，如果我设置了一个console.log，则调用$localForage.getItem：“userproject”，并且它还没有更新。我检查了我的代码，我只在工厂中设置了一次“userproject”对象。我已经一遍又一遍地查看了文档，并运行了我能想到的每一个搜索，而且没有任何运气。我是Angularjs的新手，我怀疑我没有理解什么，或者忽略或误解了一些东西。任何帮助都是非常感谢的。我做错什么了？

Answer 1

理解这个问题的关键是找出你正在做的关于应用程序内存状态的隐藏假设。假设您通过详细控制器修改的Activity实例与将通过主控制器显示的实例相同。这种假设是错误的。对象看起来可能是一样的，因为它们来自同一个源，但实际上它们是不同的实例；更新一个不会导致另一个更改。有关演示，请参见这弹琴。

要修复，只需使用更新的对象图调用$localforage.setItem，然后再从详细控制器调用$state.go。实际上，您的代码完全放弃了更新的对象图。进行此更改将确保您下一次对$localforage.getItem的调用将获得您所期望的数据。

附带注意:最好将所有$localforage操作都放在HoursService上的某个方法后面。不要用服务层的实现细节污染控制器！

这有用吗？