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

3

I have a <input type=file> and I want to add the path of the image to this input to send the form to my webservice. I can get the image path through a factory and I can not change the value of this input by adding the path.

How do I change the value of this input by the 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);
    }
  }
}]);
    
asked by anonymous 21.11.2015 / 01:44

2 answers

3

Colleague, you're addressing the issue without taking into account the philosophy of angularjs that is to change the DOM only through policies.

A factory should not change the DOM. A controller should not change the DOM.

You say that you want to "add the image path to this input to send the form to my webservice"

So you're using the input to temporarily save the value of the image path and can retrieve it from another point in your code. You do not have to do this.

You can either save the image path string to a variable in the factory (lastImagePath, for example), or send it from a callback or promise after the plugin retrieves the image.

Example (not tested!) of the 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);
    }
  }
});

So, in your controller:

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

The modification you are making is outside the scope of the angle, it is done directly in the html element. Currently, the angular can not recognize this type of change and therefore it is necessary to ask it to update its scope. To do this you will need to inject this $rootScope into this factory 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()
};
    
24.11.2015 / 12:01