aadroa
August 18, 2015, 1:39am
1
Hello, I have a problem with ngCordova when I run any plugin method always returns the same error .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?
…Sorry for my bad english
aadroa
August 18, 2015, 2:23am
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!
is your " js/ng-cordova.min.js " in right place ? last version ?
aadroa
August 18, 2015, 2:49pm
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…
aadroa
August 18, 2015, 11:22pm
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
4 Likes
