个人中心
gpt4 book ai didi

javascript - Angular 窗口.requestFileSystem

转载 作者：行者123 更新时间：2023-11-27 23:31:51 25 4
gpt4 key购买 nike

作为这里的第一个问题，尽管我在众多论坛上进行了搜索，但有件事我已经被困了很长一段时间了。如果我的英语不完美，我很抱歉，我希望我的表达足够清楚，让您能够理解我并帮助我解决这个问题。

我正在尝试使用 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);
    }
});

这是我的问题:当我单击“创建”按钮时，出现以下 JS 错误:类型错误:window.requestFileSystem 不是一个函数在 ( http://localhost:4400/lib/controleurs/addMemoryController.js:19:16 ) 中的 Scope.$scope. savingArray

我什至尝试使用angular.bootstrap()封装定义，但随后出现此错误:

未捕获错误:[ng:btstrpd] 应用程序已使用此元素“文档”进行引导

有人可以告诉我我做错了什么吗？

最佳答案

好的。

所以我找到了一些似乎可以解决该问题的东西。事实上，问题并不在于window.requestFileSystem函数，而是在于浏览器和应用程序的授权。

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

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

然后，我必须请求文件配额。我认为输入“0”意味着“我没有任何最大配额”，但这已被弃用。这是我必须做的:

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

关于javascript - Angular 窗口.requestFileSystem，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34500710/

25 4 0
文章推荐： javascript - 在javascript中将时间停止几秒钟
文章推荐： javascript - Angular指令参数长度限制
文章推荐： javascript - 匹配引号之间的随机字符串正则表达式javascript
文章推荐： javascript - Jquery AJAX json - 未调用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com