Question

我正在尝试创建一个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 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 *">

我无法弄清楚为什么{{local_img_src.nativeURL}}没有显示。我正在开发Mac和IOS应用程序。

Answer 1

看起来你在getLocalImg完成之前正在调用CheckFileSystemThenDownloadImg。尝试将getLocalImg移动到console.log("CheckFileSystem..:" + angular.toJson(res))旁边，如下所示：

ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
.then(function(res){
  console.log("CheckFileSystem..:" + angular.toJson(res));
  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))
    });
  }, function(err){
    console.log(angular.toJson(err))
});

Ionic，ngCordova - 从cacheDirectory下载并显示图像

1 个答案: