Question

我刚刚开始构建离子手机差距应用。我将json对象或html保存在来自服务的文本文件中，因此当应用程序处于脱机状态时，用户仍会看到内容。我可以读取文件并获取对象或html并将它们分配给我的范围变量，但我的应用程序很少显示内容。我使用weinre进行调试，它显示了文件中的html，但angular不绑定它。希望有人可以帮助我。

控制器

.controller('infoController', function($rootScope, $scope, $ionicNavBarDelegate,       $ionicPopup, CustomContent, CordovaFileSystem, CordovaNetwork){  
    if($rootScope.online){
        console.log('info CTRL online');
        CustomContent.getContent('AppInfoTekst').success(function(content){
            CordovaFileSystem.saveObject(content.HTML.Data[0].Data, "infotekst.txt", true);         
            $scope.infoText = content.HTML.Data[0].Data;        
        });
    }       
    else {      
        CordovaFileSystem.getObject("infotekst.txt").then(function(data){
            console.log(data);              
            if(data != ""){
                $scope.infoText = data;
            }                   
        });     
    }

    $scope.back = function() {
        $ionicNavBarDelegate.back();
    };
})

工厂

.factory("CordovaFileSystem", function(){
    return {
        saveObject: function(object, filename, isJson){ 
            //console.log('save to ' + filename);

            if(!isJson)
            {
                console.log(JSON.stringify(object));
            }

            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFs, fail);

            function gotFs(fileSystem) {                
                fileSystem.root.getFile("rotterdam/" + filename ,{create: true, exclusive:false},gotFileEntry, fail);
            }           

            function gotFileEntry(fileEntry) {
                fileEntry.createWriter(gotFileWriter, fail); 
            }

            function gotFileWriter(writer){             
                writer.write(object);
            }
            function fail(error){
                console.log(error);
            }         
        },

        getObject: function(filename){
            return {
                then: function(hasObject){
                    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
                    function gotFS(fileSystem) {
                        fileSystem.root.getFile("rotterdam/" + filename, null, gotFileEntry, fail);
                    }

                    function gotFileEntry(fileEntry) {
                        fileEntry.file(gotFile, fail);
                    }

                    function gotFile(file){
                        readAsText(file);
                    }           
                    function readAsText(file){
                        var reader = new FileReader();
                        reader.onloadend = function(evt) {                                                                                  
                            hasObject(evt.target.result);
                        };
                        reader.readAsText(file);
                    }

                    function fail(evt) {
                        console.log('error');
                        hasObject("");
                    }
                }
            }
        }
})

HTML

<ion-view hide-nav-bar="true">
    <ion-header-bar title='' align-title="center" class="bar-light" >
        <div class="buttons">
            <a class="button button-icon ion-arrow-left-a" ng-click="back()">               
            </a>
        </div>    
        <h1 class="title"><img class="title-image" src="img/logo.png" /></h1>                   
    </ion-header-bar>
    <ion-content class="has-header padding">
        <h2>Informatie</h2>
        <div ng-bind-html="infoText"></div>     
    </ion-content>
</ion-view>

Answer 1

在您的控制器中，Cordova文件系统操作发生在Angular生命周期之外。例如，在您更新$ scope变量时，Angular不知道更新自身，因为回调不是Angular API的一部分。

CordovaFileSystem.getObject("infotekst.txt").then(function(data){
    console.log(data);              
    if(data != ""){
        $scope.infoText = data;
    }
});

Angular必须知道更改，因为它将启动$ digest循环来处理任何绑定的更新。

以下是两个选项。

使用ngCordova http://ngcordova.com/
手动拨打$scope.$digest();

我建议使用ngCordova文件包。它为Cordova File插件提供了一个很好的Angular服务。请参阅此处的文档http://ngcordova.com/docs/并滚动至$ cordovaFile详细信息。手动触发$ digest周期可能会产生副作用（如果一个正在进行中，则会出现错误）。

从Phonegap离子应用程序中的文件绑定html

1 个答案: