Question

如果你观察到任何弱点，我正在学习棱角分明，请原谅我。我已经解决了这个问题好几个小时，所以我决定放弃它。我正在按照在线教程显示来自相机和图库的图像，所以我最后将这些代码分成不同的部分。从画廊或我的相机拍照后，我的显示视图没有任何反应。这是我的services.js中的代码

angular.module('starter')

.factory('FileService', function(){
    var images;
    var IMAGE_STORAGE_KEY = 'images';

    function getImages(){
        var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
        if(img){
            images = JSON.parse(img);
        }
        else {
            images = [];
        }

        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 makeid(){
        var text = '';
        var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

        for (var i=0; i<5;i++){
            text += possible.charAt(Math.floor (Math.random() * possible.length));
        }

        return text;
    };

    function optionsForType (type){
        var source;

        switch (type){
            case 0:
                source = Camera.PictureSourceType.CAMERA;
                break;
            case 1:
                source = Camera.PictureSourceType.PHOTOLIBRARY;
                break;
        }

        return {
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: source,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: true
        };
    }

    function saveMedia(type) {
        return $q(function(resolve, reject) {
        var options = optionsForType(type);


        $cordovaCamera.getPicture(options).then(function(imageUrl) {
            var name = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);
            var namePath = imageUrl.substr(0, imageUrl.lastIndexOf('/') + 1);
            var newName = makeid() + name;
            $cordovaFile.copyFile(namePath, name, cordova.file.dataDirectory, newName)
              .then(function(info) {
                FileService.storeImage(newName);
                resolve();
              }, function(e) {
                reject();
              });
            });
        })
    }


    return {
        handleMediaDialog: saveMedia
    }

});

这是我在index.html中的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

  </head>
  <body ng-app="starter">
    <body ng-app="starter">
  <ion-content class="has-header padding" ng-controller="ImageController">
    <button class="button button-full button-energized" ng-click="addMedia()">
      Add image
    </button>
    <button class="button button-full button-positive" ng-click="sendEmail()">
      Send mail
    </button>
    <br><br>
    <ion-scroll direction="x" style="height:200px; min-height: 200px; overflow: scroll; white-space: nowrap;">
      <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" style="height:200px; padding: 5px 5px 5px 5px;"/>
    </ion-scroll>
  </ion-content>
</body>
  </body>
</html>

这是我的controllers.js文件中的代码

    angular.module('starter')

    .controller ('ImageController', function ($scope, $cordovaDevice, $cordovaFile, $ionicPlatform, $cordovaEmailComposer, $ionicActionSheet, ImageService, FileService ){

        $ionicPlatform.ready(function(){
            $scope.images = FileService.images();
            $scope.$apply();
        });

        $scope.urlForImage = function(imageName){
            var trueOrigin = cordova.file.dataDirectory + imageName;
        return trueOrigin;
        }

        $scope.addMedia = 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.addImage = function(type) {
        $scope.hideSheet();
        ImageService.handleMediaDialog(type).then(function() {
          $scope.$apply();
        });
      }


        $scope.sendEmail = function() {
        if ($scope.images != null && $scope.images.length > 0) {
          var mailImages = [];
          var savedImages = $scope.images;
          if ($cordovaDevice.getPlatform() == 'Android') {
            // Currently only working for one image..
            var imageUrl = $scope.urlForImage(savedImages[0]);
            var name = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);
            var namePath = imageUrl.substr(0, imageUrl.lastIndexOf('/') + 1);
            $cordovaFile.copyFile(namePath, name, cordova.file.externalRootDirectory, name)
            .then(function(info) {
              mailImages.push('' + cordova.file.externalRootDirectory + name);
              $scope.openMailComposer(mailImages);
            }, function(e) {
              reject();
            });
          } else {
            for (var i = 0; i < savedImages.length; i++) {
              mailImages.push('' + $scope.urlForImage(savedImages[i]));
            }
            $scope.openMailComposer(mailImages);
          }
        }
      }

      $scope.openMailComposer = function(attachments) {
        var bodyText = '<html><h2>My Images</h2></html>';
        var email = {
            to: 'some@email.com',
            attachments: attachments,
            subject: 'Devdactic Images',
            body: bodyText,
            isHtml: true
          };

        $cordovaEmailComposer.open(email).then(null, function() {
          for (var i = 0; i < attachments.length; i++) {
            var name = attachments[i].substr(attachments[i].lastIndexOf('/') + 1);
            $cordovaFile.removeFile(cordova.file.externalRootDirectory, name);
          }
        });
      }
    });

This is the code in my services.js file

angular.module('starter')

.factory('FileService', function(){
    var images;
    var IMAGE_STORAGE_KEY = 'images';

    function getImages(){
        var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
        if(img){
            images = JSON.parse(img);
        }
        else {
            images = [];
        }

        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 makeid(){
        var text = '';
        var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

        for (var i=0; i<5;i++){
            text += possible.charAt(Math.floor (Math.random() * possible.length));
        }

        return text;
    };

    function optionsForType (type){
        var source;

        switch (type){
            case 0:
                source = Camera.PictureSourceType.CAMERA;
                break;
            case 1:
                source = Camera.PictureSourceType.PHOTOLIBRARY;
                break;
        }

        return {
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: source,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: true
        };
    }

    function saveMedia(type) {
        return $q(function(resolve, reject) {
        var options = optionsForType(type);


        $cordovaCamera.getPicture(options).then(function(imageUrl) {
            var name = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);
            var namePath = imageUrl.substr(0, imageUrl.lastIndexOf('/') + 1);
            var newName = makeid() + name;
            $cordovaFile.copyFile(namePath, name, cordova.file.dataDirectory, newName)
              .then(function(info) {
                FileService.storeImage(newName);
                resolve();
              }, function(e) {
                reject();
              });
            });
        })
    }


    return {
        handleMediaDialog: saveMedia
    }

});

这是我的app.js文件中的代码

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
//    if(window.cordova && window.cordova.plugins.Keyboard) {
//      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
//    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

假设已通过命令提示符导入了所有必需的插件。请帮帮我。

图像不显示在angulajs和离子的图像标签中

0 个答案: