Question

作为第一个问题，尽管我在众多论坛上搜索，但仍有一段时间我被困住了。对不起，如果我的英语不完美，我希望我能够清楚地了解你并帮助我理解这一点。

我试图通过Cordova学习一些移动开发。我选择使用AngularJS来实现更好的应用程序管理，但我无法按照自己的意愿工作。

我想创建一个类似Instagram的应用程序，其中将存储存储器。该应用程序使用两个页面：

显示所有存储记忆的页面;
添加内存的页面。内存存储在本地json文件中。

这是我的代码（暂时）：

注意：我的代码已翻译成英文，以便更好地理解。我希望我没有做出任何翻译错误，与手头的主题无关

的index.html

<!DOCTYPE html>
<html ng-app="myMemories">
<head>
    <title>My memories</title>

    <!-- Cordova references -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <!-- Downloaded files -->
    <script src="scripts/jquery-2.1.4.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>

    <!--Personal files-->
    <script src="lib/index.js"></script>
    <script src="lib/app.js"></script>
    <script src="lib/controllers/addMemory.js"></script>
    <script src="lib/controllers/displayMemories.js"></script>
</head>
<body>
    <div class="container">
        <!-- Menu -->
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav">
                <li class="pull-left"><a href="#/">All</a></li>
                <li class="pull-right"><a href="#/addMemory">Add</a></li>
            </ul>
        </nav>
        <!-- Content -->
        <div>
            <ng-view></ng-view>
        </div>
    </div>
</body>
</html>

index.js （首次加载的文件，自动生成）

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() 
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        //angular.bootstrap(document, ['myMemories']); //aborted try
    };

    function onPause() {
    };

    function onResume() {
    };
} )();

app.js （第二个加载的文件，创建应用程序）

var app = angular.module('mesSouvenirs', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "vues/souvenirs.html",
            controller: "souvenirsControleur"
        })
        .when("/ajouteSouvenir", {
            templateUrl: "vues/ajouterSouvenir.html",
            controller: "ajouterSouvenirControleur"
        })
        .otherwise({ redirectTo: "/" });

});

addMemory.html （查看以添加内存）

<form role="form" class="col-xs-12">
    <div class="form-group">
        <label for="titre">Title :</label>
        <input type="text" id="titre" class="form-control" ng-model="souvenir.titre" placeholder="Add a memory title" />
    </div>
    <div class="form-group">
        <label for="image">Image :</label>
        <button id="image" class="form-control btn btn-default">Add...</button>
    </div>
    <button class="btn btn-default" ng-click="creatingMemory()">Create</button>
</form>

addMemoryController.js （添加内存。目前，内存是存储在本地文件中的静态json。稍后会添加动态控件）

app.controller("addMemoryController", function ($scope,$location) {
    //Array of stored memories
    $scope.memoriesList = [];

    //Souvenir courant à ajouter
    $scope.memory= {
        image: "image/mountain.png",
        title:""
    }

    $scope.creatingMemory= function () {
        $scope.memoriesList .push($scope.souvenir);
        $scope.saveArray();
    }

    $scope.saveArray= function () {
        window.requestFileSystem(window.PERSISTENT, 0, $scope.fileSystemReceived, $scope.errorHandler);
        $location.path("/");
    }

    $scope.fileSystemReceived = function (fileSystem) {
        fileSystem.root.getFile("souvenirs.json", { create: true, exclusive: false }, $scope.fileEntryReceived, $scope.errorHandler);
    }

    $scope.fileEntryReceived = function (fileEntry) {
        fileEntry.createWriter($scope.fileWriterReceived, errorHandler);
    }

    $scope.fileWriterReceived = function (fileWriter) {
        var listeSouvenirsText = angular.toJson($scope.listeSouvenirs);
        fileWriter.write(listeSouvenirsText);
    }

    $scope.errorHandler = function (error) {
        console.log(error);
    }
});

这是我的问题：当我点击＆＃34;创建＆＃34;按钮，我得到这个JS错误： TypeError：window.requestFileSystem不是函数在Scope。$ scope.savingArray in（http://localhost:4400/lib/controleurs/addMemoryController.js:19:16）

我甚至尝试使用 angular.bootstrap（）封装定义，但是我得到了这个错误：

未捕获错误：[ng：btstrpd]应用已使用此元素＆＃39;文档＆＃39;

启动

有人能告诉我我做错了吗？

Answer 1

好的。

所以我找到了一些似乎可以解决这个问题的东西。实际上，这个问题与window.requestFileSystem函数并不完全相同，但是使用了浏览器和应用程序授权。

首先，我必须根据使用的浏览器重置requestFileSystem：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

然后，我必须请求文件配额。我认为放一个＆＃34; 0＆＃34;意思是＆＃34;我没有任何最大配额＆＃34;，但这已被弃用。以下是我必须做的事情：

var requestedBytes = 1024*1024*10; // 10MB
navigator.webkitPersistentStorage.requestQuota (
    requestedBytes,
    function (grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, $scope.fileSystemReceived, $scope.errorHandler);
    },
    $scope.errorHandler
);

angular window.requestFileSystem

1 个答案: