I don't know why but the $scope is not working on callback of camera. (OnSuccess function)
HTML
<button ng-click="capturePhoto();">Capture</button>
<span>{{ test }}</span>
JAVASCRIPT
app.controller('myController', function($scope, $http) {
$scope.capturePhoto = function(){
$scope.test = "test 1";
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL });
}
function onSuccess(imageData) {
var image = imageData;
alert($scope); // [object Object]
alert($scope.test); // test1
$scope.test = "test 2"; // Problem: do not show on screen
alert($scope.test); // test2
}
});
The page is still showing test1. Am I doing something wrong? Is there a best way to do it?
Thanks
It doesn't work because you get out of angular digest cycle with the plugin callback, angular just never know that there is change, and can't update.
The simplest way is to use $apply :
function onSuccess(imageData) {
$scope.$apply(function (){
var image = imageData;
alert($scope); // [object Object]
alert($scope.test); // test1
$scope.test = "test 2"; // Problem: do not show on screen
alert($scope.test); // test2
});
}
In my opinion the best way is to use promise :
app.controller('myController', function($scope, $http, $q) {
$scope.capturePhoto = function(){
$scope.test = "test 1";
var defer = $q.defer();
defer.promise.then(function (imageData){
var image = imageData;
alert($scope); // [object Object]
alert($scope.test); // test1
$scope.test = "test 2"; // Problem: do not show on screen
alert($scope.test); // test2
}, function (error){});
navigator.camera.getPicture(defer.resolve, defer.reject, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL });
}