我是混合移动应用的新手,我想在我的应用中实现个人资料图片更新。直到现在我已经实现了以下内容。单击Imageview时会弹出一个对话框,要求您选择应用程序(图库或相机)。选择所需的应用程序后,我可以转到相应的应用程序并选择图像。但我在某些方面陷入困境,我不知道如何用新内容替换我的样本imageview。以下是我的代码
profile.html
<ion-view class="profile-view">
<ion-nav-title>
<span>Profile</span>
</ion-nav-title>
<ion-content>
<div class="top-content row">
<div class="profile-container">
<div class="user-image-container">
<pre-img ratio="_1_1" helper-class="rounded-image">
<img class="user-image" ng-src="http://115.115.122.10/vishnu/image/sample.png" ng-click="confirmDialog()" spinner-on-load>
</pre-img>
</div>
<div class="user-name">Brynn Evans</div>
<div class="user-twitter">@brynn</div>
</div>
<div class="user-background-image-outer">
<div multi-bg="['http://115.115.122.10/vishnu/image/sample.png']"></div>
</div>
</div>
<div class="bottom-content">
<div class="user-bio">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</ion-content>
controller.js
.controller('ProfileCtrl', function ($scope, $cordovaDevice, $cordovaFile, $ionicPlatform, $ionicActionSheet, ImageService, FileService, $ionicPopup, $cordovaDialogs) {
$ionicPlatform.ready(function() {
$scope.images = FileService.images();
$scope.$apply();
});
$scope.addpicture = function() {
$scope.hideSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Take photo' },
{ text: 'Photo from library' }
],
titleText: 'Add images',
cancelText: 'Cancel',
buttonClicked: function(index) {
$scope.addImage(index);
}
});
}
$scope.showAlert = function () {
var alertPopup = $ionicPopup.alert({
buttons: [
{
text: 'Take photo',
onTap: function (index) { $scope.addImage(index) }
},
{
text: 'Photo from library',
onTap: function (index) { $scope.addImage(index) }
},
{
text: 'Cancel',
onTap: function (alertPopup) { popup.close(); }
}
],
title: 'Add Images',
});
}
$scope.confirmDialog = function() {
navigator.notification.confirm("Choose your app to perform the action", function (buttonIndex) {
var btnIndex = buttonIndex;
switch (btnIndex) {
case 1:
$scope.addImage(btnIndex);
break;
case 2:
$scope.addImage(btnIndex);
break;
}
}, "Change Profile Picture", ["Take photo", "Photo From Library"]);
}
$scope.addImage = function(type) {
ImageService.handleMediaDialog(type).then(function() {
$scope.$apply();
});
}
})
services.js
.factory('FileService', function () {
var images;
var IMAGE_STORAGE_KEY = 'dav-images';
function getImages() {
var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
if (img) {
images = JSON.parse(img);
} else {
images = ['http://115.115.122.10/vishnu/image/sample.png'];
}
return images;
};
function addImage(img) {
images.push(img);
window.localStorage.setItem(IMAGE_STORAGE_KEY, JSON.stringify(images));
};
return {
storeImage: addImage,
images: getImages
}
})
.factory('ImageService', function ($cordovaCamera, FileService, $q, $cordovaFile) {
function optionsForType(type) {
var source;
switch (type) {
case 2:
source = Camera.PictureSourceType.PHOTOLIBRARY;
break;
case 1:
source = Camera.PictureSourceType.CAMERA;
break;
}
return {
quality: 90,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: source,
allowEdit: false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation: true
};
}
function saveMedia(type) {
return $q(function (resolve, reject) {
var options = optionsForType(type);
$cordovaCamera.getPicture(options).then(function (imageBase64) {
FileService.storeImage(imageBase64);
});
})
}
return {
handleMediaDialog: saveMedia
}
})
任何人都可以帮我实现我的功能。
提前致谢