AngularJS自定义onchange事件不正常工作

Question

我是一个有用的助手，可以进行文本翻译。

我有一个简单的代码，当选择要读取的文件并用选项填充选择框时调用该代码。

Angular 代码 -

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);
        }
    };
});

模板

<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>

上传文件函数通过读取并附加到数组中的文件行。但直到单击其他按钮才能在选择框中正确呈现。我该如何修复它？

- Prateek Narendra

Answer 1

你需要手动运行一个digest循环。因为reader.onload函数是在angular之外的。Angular无法跟踪其中的更改。所以你需要让Angular知道有些变化发生在它的范围之外。而且Angular需要更新UI中的这些变化。

要做到这一点，使用：

$scope.$apply()

在它将文件的行附加到数组之后。

因此，您的控制器代码应如下所示：

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]);
    }
});

- Md Hasan Ibrahim