$ scope Variable in Funktion

Question

Ich muss ein paar Bilder in einer App machen, ich mache es mit Ionic und Angular.

Ich habe 3 Tasten und jeder muss ein Bild machen. Dies ist die HTML-Seite:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="takeImage1" 
height="40" width="40" style="margin-right: 7px;" ng-click="Take"> 

<img ng-src="{{srcImage2 || 'img/foto_defecto.png'}}" id="srcImage2" 
height="40" width="40" style="margin-right: 7px;" ng-click="takeImage2"> 

<img ng-src="{{srcImage3 || 'img/foto_defecto.png'}}" id="srcImage3" 
height="40" width="40" style="margin-right: 7px;" ng-click="takeImage3"> 

Spielt keine Rolle, ich Inline-CSS haben, ist es ein Test.

Und das sind die Funktionen: 3 von ihnen, eine für jede Taste.

$scope.takeImage1 = function() { 
     var options = { 
     quality: 100, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.CAMERA, 
     allowEdit: false, 
     encodingType: Camera.EncodingType.PNG, 
     targetWidth: 250, 
     targetHeight: 250, 
     popoverOptions: CameraPopoverOptions, 
     saveToPhotoAlbum: true 
     }; 

     $cordovaCamera.getPicture(options).then(function(imageData) { 
     $scope.srcImage1 = "data:image/PNG;base64," + imageData; 

     }, function(err) { 
     // error 
     }); 
    } 

Was die Funktion tut, ist: das Bild wird, speichert es und es wird eine Miniaturansicht unter dem srcImage1/2/3/etc zeigen.

Allerdings möchte ich nur eine Funktion haben und sie von jeder Taste aus aufrufen.

Für das änderte ich den Code dazu:

der Anruf:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" 
height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)"> 

die Funktion:

$scope.hacerFoto = function(numero) {   
    var options = { 
     quality: 100, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.CAMERA, 
     allowEdit: false, 
     encodingType: Camera.EncodingType.PNG, 
     targetWidth: 250, 
     targetHeight: 250, 
     popoverOptions: CameraPopoverOptions, 
     saveToPhotoAlbum: true 
    }; 
    var buscar = "srcImage".concat(numero); 
    alert(buscar); 
    $cordovaCamera.getPicture(options).then(function(imageData) { 
     $scope.buscar = "data:image/PNG;base64," + imageData; 
    }, function() { 
     alert("error al hacer la foto"); 
    }); 
} 

jedoch die $scope.buscar in meiner Absicht, eine allgemeine Funktion gewonnen‘zu machen t Aktualisieren Sie das Vorschaubild. Die alert(buscar); zeigt genau das, was ich erwarte, aber $scope.buscar wird das Bild nicht aktualisieren. Ich weiß nicht, warum es nicht funktionieren würde.

fand ich eine Lösung für dieses Problem, das die nächste ist:

$cordovaCamera.getPicture(options).then(function(imageData) { 
     var image = document.getElementById('srcImage'+numero); 
     image.src = "data:image/PNG;base64," + imageData; 
    }, function() { 
     alert("error al hacer la foto"); 
    }); 

Nehmen Sie einfach die ID mit JS und die src ersetzen. Die Antwort von @Vladimir Zdenek ist jedoch viel eleganter und in Angular - also habe ich meinen Code dahingehend geändert. Ich akzeptierte seine Answers als die richtige.

Answer 1

Sie haben die Bezugnahme auf das Bild in der Vorlage ändern von:

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)"> 

zu

<img ng-src="{{buscar1 || 'img/foto_defecto.png'}}" id="buscar1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)"> 

Dann in Ihrer Funktion, ändern Sie die folgende Zeile

$scope.buscar = "data:image/PNG;base64," + imageData; 

zu dies

$scope['buscar' + numero] = "data:image/PNG;base64," + imageData; 

Stellen Sie sicher, dass Sie auch Ihre anderen Bilder in der Vorlage ändern.

Answer 2

Versuchen Sie, den Wert von 'imageData' bei jedem Funktionsaufruf zu löschen.

var imageData = "";