Menu
Hi I am developing a hybrid application using cordova. I am trying to access the last call that is missed in an android mobile using CallLog plugin.This is what I have tried,
1.I installed the plugin with this command cordova plugin add https://github.com/dalyc/Cordova-CallLog-Plugin.git.
2.I am using angularJS.I have this app.js.
var app=angular.module('lmp', ['ngCordova']);
app.controller('lmpctrl',['$scope', 'CallLogService', function($scope, CallLogService){
$scope.data = {};
$scope.callTypeDisplay = function(type) {
switch(type) {
case 1:
return 'Incoming';
case 2:
return 'Outgoing';
case 3:
return 'Missed';
default:
return 'Unknown';
}};
CallLogService.list(1).then(
function(callLog) {
console.log(callLog);
$scope.data.lastCall = callLog[0];
},
function(error) {
console.error(error);
});
}]);
app.factory('CallLogService', ['$q', function($q) {
return {
list : function(days) {
var q = $q.defer();
// days is how many days back to go
window.plugins.calllog.list(days, function (response) {
q.resolve(response.rows);
}, function (error) {
q.reject(error)
});
return q.promise;
},
contact : function(phoneNumber) {
var q = $q.defer();
window.plugins.calllog.contact(phoneNumber, function (response) {
q.resolve(response);
}, function (error) {
q.reject(error)
});
return q.promise;
},
show : function(phoneNumber) {
var q = $q.defer();
window.plugins.calllog.show(phoneNumber, function (response) {
q.resolve(response);
}, function (error) {
q.reject(error)
});
return q.promise;
},
delete : function(phoneNumber) {
var q = $q.defer();
window.plugins.calllog.delete(id, function (response) {
q.resolve(response);
}, function (error) {
q.reject(error)
});
return q.promise;
}
}
}]);
3.This is my index.html.
<body ng-app="lmp">
<div ng-controller="lmpctrl">
<div class="row">
<div class="col">Last Call</div>
</div>
<div class="row">
<div class="col col-30 col-offset-10">Name</div>
<div class="col">{{data.lastCall.cachedName}}</div>
</div>
<div class="row">
<div class="col col-30 col-offset-10">Number</div>
<div class="col">{{data.lastCall.number}}</div>
</div>
<div class="row">
<div class="col col-30 col-offset-10">Type</div>
<div class="col">{{callTypeDisplay(data.lastCall.type)}}</div>
</div>
<div class="row">
<div class="col col-30 col-offset-10">Date</div>
<div class="col">{{data.lastCall.date | date}}</div>
</div>
<div class="row">
<div class="col col-30 col-offset-10">Duration</div>
<div class="col">{{data.lastCall.duration}} seconds</div>
</div>
<div class="row">
<div class="col col-30 col-offset-10">Acknowledged</div>
<div class="col">{{(data.lastCall.new == 1 ? 'yes' : 'no')}}</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
4.I added this following code in my config.xml
<feature name="CallLog">
<param name="android-package" value="com.ubookr.plugins.CallLogPlugin"/>
</feature>
Am I missing something or Am I wrong by someway. Can someone please help me.thanks in advance.
354
It seems that window.plugins is undefined. What I do to avoid that is to manually bootstrap AngularJS on DeviceReady event instead of using ng-app directive, as explained in Cordova + Angularjs + Device Ready
To do that, remove ng-app directive from your <body> element, and place this JavaScript on top of your app.js script:
document.addEventListener('deviceready', function() {
var body = document.querySelector('body');
angular.bootstrap(body, ['lmp']);
}, false);
This will wait until the device is ready to bootstrap angular, ensuring that all the device services are available before you use them.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
