How to change the value of an input by a Factory?

Question

I have a <input type=file> and I want to add the image path to this input to send the form to my webservice. I can pick up the image path through a Factory and cannot change the value of that input by adding the path.

How do I change the value of that input by Factory ?

input

<input type="file" ng-model='User.imageFile' id='imageFile'/>

Factory

var app = angular.module('starter');

app.factory('CameraFactory', ['$q', function($q) {

    var options = {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: 0,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album        
    }

    var onSuccess = function(imageData) { 
        window.resolveLocalFileSystemURI(imageData, function(fileEntry) {                
            //console.log(fileEntry.nativeURL);      
            var imageFile = document.getElementById('imageFile');
            imageFile.value = fileEntry.nativeURL;                     
        });    

        var image = document.getElementById('smallimage');
        image.src = imageData;  

    };

    var onFail = function(e) {
        console.log("onFail! " + e);        
    };

    return {
        getPicture: function() {
            return navigator.camera.getPicture(onSuccess,onFail,options);
    }
  }
}]);

Answer 1

Colleague, you are addressing the problem without taking into account the philosophy of Angularjs which is to change the DOM only through directives.

A Factory should not alter the DOM. A controller should not change the DOM.

You say you want to "add the image path to this input to send the form to my web service"

So, you are using the input to temporarily save the value of the image path and get it back from another point in your code. You don’t have to do this.

You can save the image path string to a variable in Factory (lastImagePath, for example), or send it from a callback or Promise after the plugin recovers the image.

Example (not tested!) of callback option:

app.factory('CameraFactory', function($q) {

    var options = {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: 0,  // 0:Photo Library, 1=Camera, 2=Saved Photo Album        
    }

    return {
        getPicture: function(cback) {
            var onSuccess = function(imageData) {
                window.resolveLocalFileSystemURI(imageData, function(fileEntry) {
                    if (cback) cback(
                            { success:true,
                              path: fileEntry.nativeURL, 
                              imageData: imageData 
                            }
                    );
                });

            };

            var onFail = function(e) {
                console.log("onFail! " + e);
                if (cback) cback( {success:false} );
            };


            navigator.camera.getPicture(onSuccess, onFail, options);
    }
  }
});

Then on your controller:

CameraFactory.getPicture( function(result) {
     if (result.success) {
           // faça algo com result.path e result.imageData
     } else {
           console.log('falhou...');
     }
);

Answer 2

The modification you are making, is outside the scope of the angular, it is done directly in the html element. Currently, the angular cannot recognize this type of change and therefore it is necessary to ask it to update its scope. For this you will need to inject in this Factory the $rootScope and execute the following code after changing the image element:

var onSuccess = function(imageData) { 
    window.resolveLocalFileSystemURI(imageData, function(fileEntry) {                
        //console.log(fileEntry.nativeURL);      
        var imageFile = document.getElementById('imageFile');
        imageFile.value = fileEntry.nativeURL;
        $rootScope.$apply()             
    });    

    var image = document.getElementById('smallimage');
    image.src = imageData;  
    $rootScope.$apply()
};