Question

这是我的控制器，我正在尝试使用第1页中的按钮捕获图像并将其存储在本地，并在第1页中显示image1，然后如果我再次单击该按钮以获取image2的图片。 Image2应显示在page1中，image1应在page2中查看

.controller('LeadDetailController', [
            '$scope', 
            '$cordovaDevice',
            '$cordovaFile',
            '$ionicPlatform',
            'ImageService', 'FileService',
function(   $scope, 
            $cordovaDevice,
            $cordovaFile,
            $ionicPlatform,
            ImageService, FileService) {
 // image capture code
    $ionicPlatform.ready(function() {
         console.log('ionic is ready');
        $scope.images = FileService.images();
        $scope.$apply();
    });

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

    $scope.addImage = function(type) {
        ImageService.handleMediaDialog(type).then(function() {
          $scope.$apply();
        });
    }

在初始阶段本身我收到此错误

错误：[$ rootScope：inprog] $ digest已在进行中

第1页，带按钮

// here camera function is called to open the camera and take pic
<ion-option-button ng-click="addImage()"class="icon ion-android-camera"></ion-option-button>
//here the pic taken in camera should be displayed 
<ion-option-button> 
      <img src="">       
</ion-option-button>
//here moveing to the next page2
<ion-option-button ng-click="Page2()" class="icon ion-ios-grid-view"></ion-option-button>

page2 html

<ion-view>
    <ion-nav-bar class="bar-positive">
        <ion-nav-title class="title">Grid View</ion-nav-title>
    </ion-nav-bar>
    <ion-content class="has-header">
        <img ng-repeat="image in images" ng-src="{{image.src}}" ng-click="showImages($index)" style="height:50%; width:50%; padding:2px ">
    </ion-content>
</ion-view>

第2页控制器

 .controller('gridController', function($scope, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate)  {  
//here the images are stored inside the array   
        $scope.images = [{    }];

服务

.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: false,
      encodingType: Camera.EncodingType.JPEG,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };
  }

  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
  }
});

有人可以帮助我解决这个问题，并帮助我使用page2进行图像审核

Answer 1

如@Ila所述，问题可能是由于$ scope。$ apply（）。

因此，如果您无法预测是否必须使用它，请按以下方式插入if语句：

if(!$scope.$$phase) {
  // no digest in progress... 
  $scope.$apply();
}

然而，这不是一个好习惯：更喜欢只在真正需要时使用$ scope。$ apply（）。见Angular docs

Answer 2

我同意vb-platform。但您也可以将代码包装到$timeout中，以便angularjs为您处理$apply（$timeout）：

$ionicPlatform.ready(function() {
    console.log('ionic is ready');

    $timeout(function setImages() {
        $scope.images = FileService.images();
    });
});

当我使用具有相机功能的ionicplatform.ready时，$ digest已经在进行中

2 个答案: