函数中的 $scope 变量
$scope variable in function
我必须在应用程序中拍几张照片,我正在使用 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 中 - 所以我将我的代码更改为那个。我接受了他的回答是正确的。
尝试在每次函数调用时清除'imageData'的值。
var imageData="";
您必须更改模板中对图像的引用:
<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;
另外请务必更改模板中的其他图片。
我必须在应用程序中拍几张照片,我正在使用 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 中 - 所以我将我的代码更改为那个。我接受了他的回答是正确的。
尝试在每次函数调用时清除'imageData'的值。
var imageData="";
您必须更改模板中对图像的引用:
<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;
另外请务必更改模板中的其他图片。