函数中的 $scope 变量

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 个，每个按钮一个。

    $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下显示一个缩略图

但是我只想拥有一个函数并从每个按钮调用它。

为此，我将代码更改为：

电话：

<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

尝试在每次函数调用时清除'imageData'的值。

var imageData="";

Answer 2

您必须从以下位置更改对模板中图像的引用：

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

到

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

然后在你的函数中，更改以下行

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

到这里

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

还要确保更改模板中的其他图像。