角度图像添加到阵列然后发布到API

Question

我想建立一个系统，您上传照片添加照片到阵列，保存照片。当您将照片保存到API时，也会在上次访问时使用保存在API中的当前图像填充阵列。

所以

1. 用户上传的照片，看到一个预览（工作）
2. 单击添加，它增加了预览图像阵列（不工作）
3. 保存更新阵列和张贴到API。 （工作但剂量不会更新阵列异步）从阵列（不工作）
4. 删除图片

在综述

我需要从API拉图像的阵列和所述图像可以被删除并添加，然后保存回API。

任何人都可以帮助我解决这个问题，我相信代码是正确的，但也许是代码中的一些错误或错误。

当我点击添加，我得到一个错误。

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.15/ $rootScope/inprog?p0=%24apply

我的HTML

<div class="dynamic-upload-container"> 
     <div class="preview"><img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"></div> 
     <div class="upload-new"> 
      <input id="fileinput" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)"> {{uploadError}} 

     </div> 
     <div class="slots-container"> 
      <table> 
       <tr> 
        <th><h3>there is a campaign</h3></th> 
        <th> <strong>{{campaign.c_name}}</strong></th> 
       </tr> 
       <tr> 
        <td><h3>this is the max slots</h3></td> 
        <td><strong>{{campaign.max_slots}}</strong></td> 
       </tr> 
       </tr> 
      </table> 

      <button ng-click="addImage()">Add image</button> 

      <h3>this are the slots</h3> <strong>{{campaign.slots}}</strong> 

       <div ng-repeat="slot in campaign.slots" class="slot"> 
        <img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="slot image"> 
        <button ng-click="removeImage(slot)">Remove Image</button> 
       <div>this is a slot</div> 
      </div> 

      <button ng-click="SaveImage()">Save</button> 
     </div> 
    </div> 

的JavaScript

.controller('Dashboard', function ($scope, $http, $timeout) { 

    $scope.campaigns =[]; 
    $scope.preview = 'img/download.png'; 
    $scope.slots = []; 
    $scope.maxSlots = 5; // this dynamic 


    $scope.debug = function(){ 
     console.log('this is debug'); 
     console.log($scope.slots.length); 
    }; 

    $scope.uploadImage = function() { 
     // console.log('we are here'); 
     input = document.getElementById('fileinput'); 
     file = input.files[0]; 
     size = file.size; 
     if (size < 650000) { 
      var fr = new FileReader; 
      fr.onload = function (e) { 
       var img = new Image; 

       img.onload = function() { 
        var width = img.width; 
        var height = img.height; 
        if (width == 1920 && height == 1080) { 
         $scope.preview = e.target.result; 
         $scope.perfect = "you added a image"; 
         $scope.$apply(); 

        } else { 
         $scope.notPerfect = "incorrect definitions"; 
         $scope.$apply(); 
        } 
       }; 
       img.src = fr.result; 
      }; 

      fr.readAsDataURL(file); 
     } else { 
      $scope.notPerfect = "to big"; 
     } 
    }; 

    $scope.addImage = function() { 
     if ($scope.slots.length < $scope.maxSlots) { 
      $scope.slots.push({ 
       "slot_id": $scope.slots.length + 1, 
       "base_image": $scope.preview, 
       "path_image": "" 
      }); 
      $scope.$apply(); 

     } else { 
      window.alert("you have to delete a slot to generate a new one"); 
      // console.log('you have to delete a slot to generate a new one') 
     } 
     // $scope.$apply() 
    }; 

    $scope.SaveImage = function() { 
     $http({ 
      url: "http://www.site.co.uk/ccuploader/campaigns/updateSlots", 
      method: "POST", 
      data: { 'campaign': "ben", 'slots': $scope.slots }, 
      headers: {'Content-Type': 'application/json'} 
     }).then(function (response) { 
      // success 
      console.log('success'); 
      console.log("then : " + JSON.stringify(response)); 
      // location.href = '/cms/index.html'; 
     }, function (response) { // optional 
      // failed 
      console.log('failed'); 
      console.log(JSON.stringify(response)); 
     }); 
    }; 

    $scope.removeImage = function(s) { 
     $scope.slots.splice($scope.slots.indexOf(s), 1); 
    }; 

    $scope.GetData = function() { 
     $http({ 
      url: "http://www.site.co.uk/ccuploader/campaigns/getCampaign", 
      method: "POST", 
      date: {}, 
      headers: {'Content-Type': 'application/json'} 
     }).then(function (response) { 
      // success 
      console.log('you have received the data '); 
      console.log(response); 


      $scope.campaigns = response.data; 
      //$scope.slots = data.data[0].slots; 

     }, function (response) { 
      // failed 
      console.log('failed getting campaigns goo back to log in page.'); 
      console.log(response); 
     }); 
    }; 

    $scope.GetData(); 
}) 

Answer 1

你不应该直接使用$spply方法。因为如果你在摘要周期内触发它，你会得到类似上面的错误。而应始终使用以下方法safeApply。所有$apply()方法与

$scope.safeApply(); 

/** 
 
* This method is to create a safe apply rather than triggering 
 
* the $apply method inside a digest circle. 
 
*/ 
 
$scope.safeApply = function(fn) { 
 
    if (this.$root) { 
 
    var phase = this.$root.$$phase; 
 
    if (phase == '$apply' || phase == '$digest') { 
 
     if (fn && (typeof(fn) === 'function')) { 
 
     fn(); 
 
     } 
 
    } else { 
 
     this.$apply(fn); 
 
    } 
 
    } else { 
 
    fn(); 
 
    } 
 
}; 
 

 
//Use this anywhere instead of the inbuilt $scope.$apply() method. 
 
//$scope.safeApply();