我有两个作用域函数,当我只点击按钮时,它们中的任何一个都会被调用,但一旦被调用,我意识到作用域变量的值每次都会自动更新。
$scope.images = [];
$scope.imagesAttached =[];
$scope.takePhoto = function(index) {
if(modalExists === true) {
$scope.modal1.hide();
}
$scope.showSendButton = true;
$scope.attachedImageExists = false;
if($scope.imagesAttached.length > 0) {
$scope.images = $scope.imagesAttached
$scope.attachedImageExists = true;
}
var options = {
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
correctOrientation: true
};
// 3
$cordovaCamera.getPicture(options).then(function(imageData) {
// 4
var imagetype;
onImageSuccess(imageData);
function onImageSuccess(fileURI) {
createFileEntry(fileURI);
}
function createFileEntry(fileURI) {
window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
}
// 5
function copyFile(fileEntry) {
var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
var newName = (new Date()).getTime() + name;
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
fileEntry.copyTo(
fileSystem2,
newName,
onCopySuccess,
fail
);
}, fail);
}
// 6
function onCopySuccess(entry) {
$scope.$apply(function() {
$scope.modal.remove();
$scope.activeSlide = index;
if(modalExists === false) {
$ionicModal.fromTemplateUrl('image-modal.html', {
scope: $scope,
}).then(function(modal) {
$scope.modal1 = modal;
$scope.modal1.show();
modalExists = true;
$scope.images.push({file: entry.nativeURL, type: $scope.imagelist});
console.log($scope.imagesAttached.length)
console.log($scope.images.length)
});
}
else {
$scope.modal1.show();
$scope.images.push({file: entry.nativeURL, type: $scope.imagelist});
console.log($scope.imagesAttached.length)
console.log($scope.images.length)
}
});
}
function fail(error) {
console.log("fail: " + error.code);
}
}, function(err) {
console.log(err);
});
}
$scope.sendPhoto = function() {
$scope.imagesAttached = angular.copy($scope.images);
}
我的image-modal.html页面
<script id="image-modal.html" type="text/ng-template">
<div class="modal image-modal transparent">
<ion-header-bar class="bar bar-header bar-dark">
<div class ="row">
<div class ="col">
<label ng-click="closeModal(1)">Cancel</label>
</div>
<div class ="col">
<label ng-click="deleteImage()">Delete</label>
</div>
<div class ="col" id="send-images" ng-show="showSendButton">
<label ng-click="sendtoAttach()">Send</label>
</div>
</div>
</ion-header-bar>
<ion-slide-box on-slide-changed="slideChanged($index)" show-pager="true" active-slide="activeSlide" >
<ion-slide ng-repeat="image in images">
<img ng-src="{{image.file}}" class="fullscreen-image"/>
</ion-slide>
</ion-slide-box>
<div class="row">
<ion-scroll>
<img ng-repeat="image in images" ng-src="{{urlForImage(image.file)}}" class="image-list-thumb" height="50px"/>
</ion-scroll>
<button class="ion-camera" ng-click="takePhoto()"></button>
</div>
</div>
</script>
我有两个按钮接收和发送
当我第一次调用takePhoto和SendPhoto时,值是正确的,推送一个图像,并且我的$scope.images
和$scope.imagesAttached is 1
的长度,
但如果我再次单击takePhoto按钮,而不调用SendPhoto按钮,则两个都是我的$scope.images and $scope.imagesAttached length is updated to 2
,而它应该只有$scope.images = 2
,而$scope.imagesAttached = 1
,因为我还没有调用$scope.sendPhoto
。
我知道angularJS有一些$apply和$digest的双绑定内容,但不确定它是如何工作的,也不知道为什么它会自动绑定我的范围变量。
感谢的任何帮助
这与Angular无关,它纯粹是工作中的JavaScript对象引用。
将$scope.images
指定给$scope.imagesAttached
时,两个变量都引用同一对象。
请在sendPhoto
函数中尝试此操作
$scope.imagesAttached = angular.copy($scope.images)