Error : Cannot read property 'addEventListener' of null

I have to upload a file from local system ,read content of it and pass it to variable. As per business requirement when user click on a button a modal opens and in that modal I have to upload file and read content.

我必须从本地系统上传文件，读取它的内容并将其传递给变量。根据业务需求，当用户点击按钮时，模式打开并且在该模态中我必须上传文件并阅读内容。

button which will open modal

按钮将打开模态

<div ng-controller="CreateTestController as t_ctrl"> 
     <button class="btn btn-primary btn-md" ng-
      click="t_ctrl.importSteps()">Import Steps</button>
</div>

myApp.controller('CreateTestController', function (TestScriptApi, $scope, $modal, $rootScope) {
var t_ctrl = this;
t_ctrl.formData = {
    test1: '',
    test2: ''
}
/* some funationality */

// import steps added 

vm.importSteps = function () {
    $modal.open({
        size: 'md',
        templateUrl: 'js/some_location/import-step.html?',
        controller: 'ImportStepController as importStepController',
        resolve: {
            t_ctrl: function () {
                return t_ctrl;
            }
        }
    });
};
});

import-step.html

进口step.html

<div >
    <input type="file" name="file" id="importFile" >
    <button type="button" ng-click="readFilex()">Some Button</button>
</div>

import-step.js

进口step.js

myApp.controller('ImportTestStepController', function ($scope, $modalInstance, t_ctrl) {
    var vm = this;

    vm.sequenceNo = '';
    vm.command = '';
    vm.method = '';


    var x = document.getElementById('importFile');
    x.onchange = function () {
        var file = this.files[0];
        alert("working");
        var reader = new FileReader();
        reader.onload = function (evnt) {
            // Entire file
            console.log(this.result);

            // By lines
            var lines = this.result.split('\n');
            for (var line = 0; line < lines.length; line++) {
                // By tabs
                var tabs = lines[line].split('\t');
                for (var tab = 0; tab < tabs.length; tab++) {
                    alert(tabs[tab]);
                }
            }
        };

        reader.readAsText(file);
    };
});

1 个解决方案

#1

Problem

问题

getElementById this is just not how Angular works. You don't select elements by ID in Angular to add change listeners.

getElementById这不是Angular的工作原理。您不要在Angular中按ID选择元素以添加更改侦听器。

var x = document.getElementById('importFile'); // This DOM element does not always exist. It is in an Angular template, and will be inserted in the DOM at some point.
    x.onchange = function () { // Therefore, x is not defined, and you can't add .onchange on null.

This is why you get the error :

这就是你得到错误的原因：

Cannot read property 'addEventListener' of null

无法读取null的属性'addEventListener'

, because x is not defined because it does not always exist in the DOM.

，因为x没有定义，因为它并不总是存在于DOM中。

Solution

解

You have included the Angular library, use it; not vanilla javascript.

你已经包含了Angular库，使用它;不是香草javascript。

<input type="file" name="file" ng-change="doSomething()" ng-model="files" >

AngularJS documentation for ng-change

用于ng-change的AngularJS文档

AngularJS documentation for ng-model

ng-model的AngularJS文档

#1