我正在尝试创建一个angular.factory,以便能够下载图像并将其显示到我的Ionic App .
问题是我无法从'file.nativeURL'等显示下载img .
我正在使用ngCordova $ cordovaFile,$ cordovaFileTransfer插件 .
这是我的工厂代码:
app.factory('ImgDownload', function ($q, $cordovaFile, $cordovaFileTransfer) {
function download_img(url, filePath, options, AllowAllHost){
var q = $q.defer();
$cordovaFileTransfer.download(url, filePath, options, AllowAllHost)
.then(function(res) {
q.resolve(res)
}, function (err) {
q.reject(err);
});
return q.promise
}
return {
CheckFileSystemThenDownloadImg: function(url, file, StorageDirectory, directory) {
var filePath = StorageDirectory + directory + '/' + file;
var q = $q.defer();
$cordovaFile.checkDir(StorageDirectory, directory).then(function () {
$cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
q.resolve(res)
}, function() {
var options = {create : true, exclusive: false};
download_img(url, filePath, options, true).then(function (res) {
q.resolve(res);
}, function (err) {
q.reject(err)
})
})
}, function() {
var options = {create : true, exclusive: false};
$cordovaFile.createDir(StorageDirectory, directory, true).then(function () {
download_img(url, filePath, options,true).then(function (res) {
q.resolve(res)
console.log(res)
}, function (err) {
console.log(err)
q.reject()
})
})
});
return q.promise
},
getLocalImg: function(StorageDirectory, file, directory) {
var q = $q.defer();
$cordovaFile.checkDir(StorageDirectory, directory).then(function () {
$cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
q.resolve(res)
}, function (err) {
q.reject(err)
})
}, function (err) {
q.reject(err)
});
return q.promise
}
}
});
我的控制器:
app.controller('MainCtrl', function($scope, $ionicPlatform, ImgDownload){
$scope.img_remote = 'http://yourwatch.gr/wp-content/uploads/CMC808071.jpg'
$ionicPlatform.ready(function() {
var url = 'http://yourwatch.gr/wp-content/uploads/CMC808071.jpg';
var file = 'CMC808071.jpg';
var StorageDirectory = cordova.file.cacheDirectory;
var directory = 'Images';
ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
.then(function(res){
console.log("CheckFileSystem..:" + angular.toJson(res))
}, function(err){
console.log(angular.toJson(err))
})
ImgDownload.getLocalImg(StorageDirectory, file, directory)
.then(function(res){
console.log("getLocalImg:" + angular.toJson(res))
$scope.local_img_src = res
},
function(err){
console.log(angular.toJson(err))
})
});
});
我的看法:
<img ng-src="{{ local_img_src.nativeURL }}" alt="" />
我的meta Content-Security-Policy:
<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile://* content://* file:///*; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *">
我无法弄清楚为什么{}没有显示 . 我正在开发Mac和IOS应用程序 .
1 回答
看起来你在
CheckFileSystemThenDownloadImg
完成之前正在调用getLocalImg
. 尝试将getLocalImg
移动到console.log("CheckFileSystem..:" + angular.toJson(res))
旁边,如下所示: