After conducting an extensive search on both Google and Stack Overflow, I was unable to find a solution to the issue at hand.
So, moving forward, here is the problem I am facing:
I have created a directive that is intended to retrieve data selected in a simple input type file. When I check the data using console.log, everything appears to be working fine. However, when I attempt to monitor the value change in my controller, it never actually changes.
Below is the code for my directive:
app.directive('esFileRead', [
function () {
return {
restrict: 'A',
$scope: {
esFileRead: '='
},
link: function ($scope, $elem) {
$elem.bind('change', function (changeEvent) {
if (FileReader) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
$scope.$apply(function () {
$scope.esFileRead= loadEvent.target.result;
console.log($scope.esFileRead);
});
};
reader.readAsDataURL(changeEvent.target.files[0]);
}
else {
// FileReader not supported
}
});
}
}
}
]);
And here is what my controller looks like:
app.controller('MainController', [
'$rootScope',
'$scope',
'DataManagementService',
function ($rootScope, $scope, DataManagementService) {
$scope.importFile = "";
$scope.$watch('importFile', function (newValue, oldValue) {
console.log(newValue);
if(newValue && newValue !== oldValue) {
DataManagementService.importData(newValue);
}
});
}
]);
This is how my view is set up:
<input id="btnImport" type="file" es-file-read="importFile"/>