$ scope function in function

Question

私はアプリでいくつかの写真を撮る必要があります。私はIonicとAngularで作っています。

私は3つのボタンがあり、それぞれが写真を撮る必要があります。 これは、HTML側である：

<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"> 

私はインラインCSSを持っている問題ではない、それはテストです。

これらの機能は3つあり、各ボタンに1つあります。

$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 
     }); 
    } 

関数である何：、写真をとり、それを保存し、それがsrcImage1/2/3は/ etcの下にサムネイルが表示されます。

しかし、私はただ1つの機能を持ち、各ボタンから呼び出す必要があります。そのために

私はこれにコードを変更：

コール：

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

機能：

一般的な機能のウォン「を作るために私の意図で

$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"); 
    }); 
} 

しかし$scope.buscarサムネイルを更新しないでください。

alert(buscar);は私が期待しているものを正確に示していますが、$scope.buscarは画像を更新しません。なぜそれがうまくいかないのか分かりません。

$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"); 
    }); 

ちょうどJSでIDを取得し、SRCを置き換える：

は、私は次のものであるこれを解決するには、発見しました。 しかし、@ Vladimir Zdenekの答えははるかにエレガントで、Angularです。そのためにコードを変更しました。私は彼の答えを正しいものとして受け入れた。

Answer 1

あなたからあなたのテンプレートの画像への参照を変更する必要がありますに

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

次の行を変更し、あなたの関数に続いて

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

に

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

この

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

また、テンプレート内の他の画像も変更してください。

Answer 2

関数呼び出しのたびに 'imageData'の値をクリアしてみてください。

var imageData = "";