AngularJS customization not working as expected
I have a simple code that is called when a file is selected to read it and populate a selection box with options
Angular code -
angapp.controller('panbulkCtrl', function($scope) {
$scope.deviceGroups = [];
$scope.uploadFile = function() {
var filename = event.target.files[0].name;
var reader = new FileReader();
reader.onload = function (e) {
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
for (var j = 0; j < cells.length; j++) {
console.log(cells[j]);
$scope.deviceGroups.push(cells[j]);
}
}
}
reader.readAsText(event.target.files[0]);
}
});
angapp.directive('customOnChange', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var onChangeFunc = scope.$eval(attrs.customOnChange);
element.bind('change', onChangeFunc);
}
};
});
HTML Template
<div class="jumbotron" style="background-color:white">
</div>
<div class="jumbotron container-fluid">
<h3 align="center">PAN Bulk Upload</h3>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div style="border-right:1px solid #cbc6c6">
<div class="container panel-body">
<label class="custom-file-upload">
<input id="fileChoose" type="file" custom-on-change="uploadFile" />
<i class="fa fa-cloud-upload"> Choose Device Group File</i>
</label>
<hr/>
<select size=5 style="width:200px;height:100px" ng-model="deviceGroupsList" ng-options="o as o for o in deviceGroups">
</select>
</div>
<div class="container">
<button ng-click="validateDeviceGroups()">Validate</button>
<button ng-click="commitDeviceGroups()">Commit</button>
</div>
</div>
</div>
<div class="col-lg-3">
<textarea rows="20" cols="35"></textarea>
</div>
</div>
</div>
The uploadFile function reads and appends the lines of a file to an array. But it doesn't display correctly in the selection window until another button is clicked. How to fix it?
source to share
You need to start the digest cycle manually. Because the function reader.onload
is outside the angular world. angular doesn't track changes within it. So you need to make angular know that something has changed beyond its capabilities. And angular needs to update these UI changes.
To do this, use:
$scope.$apply()
after adding the file lines to the array.
So your controller code should look like this:
angapp.controller('panbulkCtrl', function($scope) {
$scope.deviceGroups = [];
$scope.uploadFile = function() {
var filename = event.target.files[0].name;
var reader = new FileReader();
reader.onload = function (e) {
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
for (var j = 0; j < cells.length; j++) {
console.log(cells[j]);
$scope.deviceGroups.push(cells[j]);
}
}
$scope.$apply()
}
reader.readAsText(event.target.files[0]);
}
});
source to share