函数中的 $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;

另外请务必更改模板中的其他图片。

函数中的 $scope 变量

$scope variable in function

angularjs

ionic-framework

angularjs-scope