[英]AngularJS image preview inside ng-repeat, probably a scope issue
我發現了這個問題並將其稍作更改,只要我在ng-repeat
之外使用它,它似乎就可以正常工作。
但是由於某種原因我無法使它正常工作,因此image.src
從未更新。 我想這比實際的預覽功能更多地是范圍問題。 我可以看到console.log(attr.imageData);
插件的第13行顯示了控制台中的字符串image
。 這應該是我認為的循環對象。
那么,選擇文件后如何獲得預覽圖像?
HTML:
<div ng-repeat="image in data.CmsPageImages">
<a href="" ng-click="removeImage($index)" class="pull-right">
<i class="fa fa-times"></i>
</a>
<input
image-callback="test1"
type="file"
wa-file-select
ng-model="image.file">
<input
type="text"
required
placeholder="Caption and copyright"
ng-model="image.caption">
<img ng-if="image.src" ng-src="image.src" style="width: 120px; height: auto;" />
</div>
整個JS代碼:
angular.module('waFrontend', []);
angular.module('waFrontend').directive('waFileSelect', ['fileReader', function (fileReader) {
return {
require: '^ngModel',
scope: {
imageData: '='
},
link: function ($scope, el, attr) {
el.bind('change', function(e) {
var file = ((e.srcElement || e.target).files[0]);
fileReader.readAsDataUrl(file, $scope).then(function (result) {
attr.imageData.src = result;
});
})
}
}
}]);
angular.module('waFrontend').controller('SubmitNewsController', [
'$scope', 'fileReader',
function ($scope, fileReader) {
$scope.data = {
CmsPage: {
title: ''
},
CmsPageImages: [
{
caption: '',
file: null
}
]
};
$scope.addImage = function() {
$scope.data.CmsPageImages.push({
caption: null,
file: null
});
};
$scope.removeImage = function(index) {
$scope.data.CmsPageImages.splice(index, 1);
};
$scope.getFile = function(file, test) {
$scope.progress = 0;
$scope.file = file;
fileReader.readAsDataUrl($scope.file, $scope).then(function (result) {
$scope.imageSrc = result;
});
};
}]);
(function (module) {
var fileReader = function ($q, $log) {
var onLoad = function (reader, deferred, scope) {
return function () {
scope.$apply(function () {
deferred.resolve(reader.result);
});
};
};
var onError = function (reader, deferred, scope) {
return function () {
scope.$apply(function () {
deferred.reject(reader.result);
});
};
};
var onProgress = function (reader, scope) {
return function (event) {
scope.$broadcast("fileProgress",
{
total: event.total,
loaded: event.loaded
});
};
};
var getReader = function (deferred, scope) {
var reader = new FileReader();
reader.onload = onLoad(reader, deferred, scope);
reader.onerror = onError(reader, deferred, scope);
reader.onprogress = onProgress(reader, scope);
return reader;
};
var readAsDataURL = function (file, scope) {
console.log(file);
var deferred = $q.defer();
var reader = getReader(deferred, scope);
console.log(file);
reader.readAsDataURL(file);
return deferred.promise;
};
return {
readAsDataUrl: readAsDataURL
};
};
module.factory("fileReader", ["$q", "$log", fileReader]);
}(angular.module("waFrontend")));
console.log(attr.imageData)
將只顯示您要放入其中的attr字符串,以查看確切的圖像對象,應使用$scope.$eval(attr.imageData)
。
您也忘記將imageData參數添加到指令中:
<input
image-callback="test1"
image-data="image"
type="file"
wa-file-select
ng-model="image.file">
或從指令范圍初始化中刪除它,否則可能會導致錯誤。
attr.imageData.src = result;
-那是行不通的。 請改用$scope.imageData.src = result
。
似乎您的指令中不需要ng-model="image.file"
,並且require: '^ngModel'
也應刪除,但是如果您有進一步的需求,請保留它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.