角图像添加到数组，然后张贴到API

Question

我正在尝试构建一个您上传照片的系统，将照片添加到数组，保存照片。当您保存照片时，它将其张贴到API中，也将阵列列入填充的，并在上次访问时保存到API的当前图像。

so

1. 用户上传照片并看到预览（工作）
2. 单击添加，然后将预览映像添加到数组（不工作）
3. 保存更新的数组并将其发布到API。（工作但剂量不更新数组异步）
4. 从数组中删除图像（不工作）

在夏季

我需要从API提取的一系列图像，可以删除并添加图像，然后将其保存回API。

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

当我单击添加时，我会发现一个错误。

错误：[$ Rootscope：inprog] http：//errors.angularjs.org/1.3.15/qulrotscope/inprog?p0=$Apply

我的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();