角度图像添加到阵列然后发布到API
问题描述:
我想建立一个系统,您上传照片添加照片到阵列,保存照片。当您将照片保存到API时,也会在上次访问时使用保存在API中的当前图像填充阵列。角度图像添加到阵列然后发布到API
所以
- 用户上传的照片,看到一个预览(工作)
- 单击添加,它增加了预览图像阵列(不工作)
- 保存更新阵列和张贴到API。 (工作但剂量不会更新阵列异步)从阵列(不工作)
- 删除图片
在综述
我需要从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();
})
答
你不应该直接使用$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();
谢谢更换,生病添加此功能,看看它是否有助于 – Beep
@Beep当然,让我知道,如果它的工作原理。 – Thusitha
似乎解决了一些问题,并不是所有的,但一些如此生病接受和发布一个新的问题,关于其余的,这不起作用。谢谢。 – Beep