volpz
volpz

Reputation: 37

$cordovaFile not defined ngcordova plugin

i have a little problem. I start an empty cordova app in visual studio 2015 and just for some tests i want to try the ng-cordova plugins (without ionic) in my app. I follow the ng cordova documentation and i added the ng-cordova.min.js file just BEFORE the cordova.js and AFTER the angular.js file. I didn't add nothing to my index.html file and on the script that is called after the cordova js file i wrote this :

(function () {
    "use strict";

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

    function onDeviceReady() {
        
        
        var app_ng=angular.module('myApp', ['ngCordova']);
        console.log('device ready');

        $cordovaFile.getFreeDiskSpace()
       .then(function (success) {
           console.log(success);
       }, function (error) {
           console.log(error);
       });
    };


} )();
<html>
<head>
    <meta charset="utf-8" />

    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <title>ngcordovatest</title>

    <!-- ngcordovatest references -->
    <link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
    <p>Hello, your application is ready!</p>
    <div id="console">

    </div>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="scripts/jquery.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/ng-cordova.min.js"></script>
    <script src="scripts/ng-cordova-mocks.min.js"></script>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    
    <script src="scripts/index.js"></script>
</body>
</html>

I always obtain the following error :

Uncaught ReferenceError: $cordovaFile is not defined

I use an android device for debug connected by USB.

What's the problem? I can't figure it out. Thank you.

Upvotes: 1

Views: 1259

Answers (1)

VISHAL DAGA
VISHAL DAGA

Reputation: 4289

As 'angular' is only the useful object in current scope. So, try something like

        function onDeviceReady() {
    .........
    angular.element(document).ready(function () {
            angular.element(document.body).injector().invoke(['$cordovaFile', function($cordovaFile){
             $cordovaFile.getFreeDiskSpace()
                   .then(function (success) {
                       console.log(success);
                   }, function (error) {
                       console.log(error);
                   });
            }]);
        }
});

Upvotes: 1

Related Questions