I'm facing an issue where additional elements added to my array within a controller of a directive are not being displayed in the view. What's even more frustrating is that when I print my model, it doesn't reflect the new elements that have been added.
Let me show you how I've set up my directives:
angular.module('example',[]);
angular.module('example').directive('documentUpload', function() {
function link($scope, $element, attrs, ngModelCtrl) {
$element.find('input[type="file"]').on('change', function (){
$scope.submitFile(this);
});
}
return {
restrict: 'E',
templateUrl: 'document-upload.html',
controller: function($scope,$element) {
$scope.files = [{ name : "blah", src: "blah" }];
$scope.submitFile = function(file,container) {
var currentFile = file.files[0];
var reader = new FileReader();
reader.onloadend = function(){
$scope.files.push({
name: currentFile.name,
src : reader.result
});
console.log($scope.files);
console.log($scope.example);
}
reader.readAsDataURL(currentFile);
};
},
alias: 'document',
link: link
}
}).directive('imageFiles', function($compile) {
return {
scope: {
file: "="
},
template: '<img ng-model="file" ng-src="file.src" alt="file.name" class="img-responsive"/>'
}
});
Despite my efforts, the updated model is still not displaying the latest element added:
<div class="row">
<pre>{{ files }}</pre>
<div class="col-lg-12">
<form method="POST" enctype="multipart/form-data" ng-submit="submit(document)">
<input type="file" name="file" ng-model="document./file/>
</form>
</div>
<div class="row" ng-repeat="file in files" image-files>
Feel free to check out this live example