I got weird problem with binding data in angular, I have an input file and if file is selected then his title should display in input below. It's displaying, but only if I click on this input. It should be displayed automatically after I select file from file input form, here is some code:
.html:
<div class="md-button md-raised md-primary raised-button">
<label class="ng-binding" for="image-file">UPLOAD FILE</label>
</div>
<md-input-container>
<div class="raised">
<input id="image_file_name" type="text" ng-model="vm.filename"></input>
</div>
</md-input-container>
<input ng-model="vm.filename" style="display: none" id="image-file" type="file"
on-upload="uploadFile"/>
controller:
app.controller('imageController', function($scope, fileService) {
$('.intro-for-image').show(2000);
$scope.uploadFile = function(event){
$scope.event = event;
fileService.uploadFile($scope);
};
});
directive:
app.directive('onUpload', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeFunc = scope.$eval(attrs.onUpload);
element.bind('change', onChangeFunc);
}
};
});
service:
angular.module('app')
.service('fileService', function ($http, validationService) {
this.uploadFile = function ($scope) {
var event = $scope.event;
var file = event.target.files[0];
name = file.name;
$scope.vm = {
file: file,
filename: name,
};
};
});
I'm not sure about this directive, I found it somewhere after I googled my earlier problem.
