ngCordova plugins doesn't work


#1

Hello, I have a problem with ngCordova when I run any plugin method always returns the same error .
For example in $cordovaFileTransfer.download, return “TypeError: Cannot call method ‘download’ of undefined” . Or when I use $cordovaMedia.newMedia, return return “TypeError: Cannot call method ‘newMedia’ of undefined”, no matter plugin utilize, I always return the same error.

I have the cordova plugins installed and ‘ngCordova’ injected, as indicated in the documentation and I tested it on real android device.

Can someone help me out? :weary:

…Sorry for my bad english :relaxed:


#2

Can you share some code?


#3

yes

this is my app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var main = angular.module('starter', ['ionic', 'ngCordova', 'ngSanitize'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

main.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });
 
                event.preventDefault();
            }
        });
    };
});

main.controller("Principal", ['$scope', '$http', function($scope, $http, $cordovaMedia, $timeout, $cordovaFileTransfer){
  $scope.searchinput = ""
  $scope.resultados = []
  $scope.spinerHTML ='<ion-spinner icon="dots"></ion-spinner>';
  var srcmp3 = ''
  var media;
  $scope.buscar = function (){
    url = 'http://192.168.0.11:8000/myapp/android/resultados/'
    $http.get(url, {params : { busqueda : $scope.searchinput }}).
        then(function(response) {
          $scope.resultados = response.data['resultados']
          console.log($scope.resultados);
        }, function(response) {
          console.log("Error");
        }
    );
    console.log($scope.resultados)
  }

  $scope.play = function (id){
    srcmp3 = "http://www.myurl.com/get/"+id;
    media = new Media(srcmp3, null, null, mediaStatusCallback); //this works
    // media = $cordovaMedia.newMedia(srcmp3); // doesn't work
    media.play();
  }

   var mediaStatusCallback = function(status) {
      if(status == 1) {
          //$ionicLoading.show({template: 'Loading...'});
      } else {
          //$ionicLoading.hide();
      }
  }

  $scope.descargar = function (id, name, artist){

 
      var url = "http://www.myurl.com/get/"+id;
      var targetPath = cordova.file.documentsDirectory + name + "-" + artist + ".mp3";
      var trustHosts = true
      var options = {};

      $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
        .then(function(result) {
          // Success!
        }, function(err) {
          // Error
        }, function (progress) {
          $timeout(function () {
            $scope.downloadProgress = (progress.loaded / progress.total) * 100;
          })
        });

  }
}]);

this is my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="js/ng-cordova.min.js" type="text/javascript"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Myapp</h1>
      </ion-header-bar>
      <ion-content ng-controller="Principal">
        <div class="list list-inset">
          <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" ng-model="searchinput" ng-enter="buscar()" placeholder="boogie wonderland">
          </label>
        </div>
        <div class="list" ng-repeat="list in resultados" ng-cloak>
            <a class="item item-thumbnail-left" href="#">
              <img ng-src="{{list.url_cover}}">
              <h2>{{list.titulo}}</h2>
              <p>{{list.artista}}</p>
              <button class="button button-small button-assertive" ng-click="play('{{list.id_mp3}}')">
                <i class="ion-play"></i>
              </button>
              <button class="button button-small button-assertive" ng-click="descargar('{{list.id_mp3}}', '{{list.titulo}}','{{list.artista}}')">
                <i class="ion-ios-cloud-download"></i>
              </button>
            </a>
        </div>
      </ion-content>
      <ion-footer-bar align-title="left" class="bar bar-footer bar-balanced">
      <h1 class="title">Hola</h1>
      </ion-footer-bar>
    </ion-pane>
  </body>
</html>

PD: if execute cordova plugins without using ngCordova, works fine!


#4

is your " js/ng-cordova.min.js " in right place ? last version ?


#5

the version of ngCordova is the last v0.1.20-alpha (has been downloaded the sunday), and I think my file is in the right place…


"Cannot read property 'toast' of undefined", $cordovaToast, ngCordova
#6

Problem solved…

It’s necessary to make a change in the documentation of ngCordova, many examples are deprecated. I fix it, adding plugin to array injection and wrapped the call method plugin in the $ionicPlatform.ready function, for example:

main.controller("Principal", ['$scope', '$http', '$ionicPlatform','$cordovaMedia', function($scope, $http, $ionicPlatform, $cordovaMedia){
  $scope.play = function (id){
    srcmp3 = "http://www.myurl.com/get/"+id;
    $ionicPlatform.ready(function() {
      var media = $cordovaMedia.newMedia(srcmp3);
      media.play();
    });
  }
}]);

It’s important keep the order of arguments and dependencies and add the plugins that you need after add platform (not before)

Sorry for my bad english , I hope helped someone