0
//Module
var flasherApp = angular.module('flasherApp', []);
//Service
flasherApp.service('albumService', function ($timeout) {
this.createDataURL = function (img) {
return $timeout(function() {
var reader = new FileReader();
reader.onload = imageIsLoaded
reader.readAsDataURL(img);
function imageIsLoaded(e) {
return e.target.result;
};
}, 100);
}
});
//Directive
flasherApp.directive('ngImgFiles', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngImgFiles);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files);
});
});
}
};
}
]);
//Controller
flasherApp.controller('albumCntrl', ['$scope', 'albumService', function ($scope, albumService) {
$scope.files = [];
$scope.imageDataUrls = []
$scope.rows = function (n) {
return new Array($scope.imageDataUrls);
};
$scope.upload = function() {
angular.forEach($scope.files, function (file, key) {
albumService.createDataURL(file).then(function (imageDataUrl) {
alert(imageDataUrl);
$scope.imageDataUrls.push(imageDataUrl);
});
});
}
}
]);
HtmlのangularjsでreadAsDataURL()のコールバックを作成する方法は?
<input type="file" multiple="multiple" accept="image/JPEG, image/BMP, image/PNG, image/GIF, image/TIFF" id="img-upload" ng-img-files="files" name="file" />
<button data-ng-click="upload()">Upload</button>
<div class="row" data-ng-repeat="row in rows track by $index">
<div class="col-sm-3" data-ng-repeat="imageDataUrl in imageDataUrls | limitTo:($parent.$index*4):((($parent.$index+1)*4)-1)" >
<img alt="" class="img-responsive" style="width:100%;height:100%" src=" {{imageDataUrl}}"/>
</div>
</div>
あなたがから約束を返却する必要がある私はalbumService
でcreateDataURL
関数を呼び出すことだし、それは非同期関数が含まれていますが、コールバックが適切に
ありがとうございました! :) –