指令控制器没有反应

Question

我创建了简单的角度指令。 html代码运行正常，但我认为.js代码永远不会运行。例如。我尝试打印这个简单的单词并且没有反应：

第二个错误是当我想从html文件中通过id获取元素时，就像我想要使用addActionListiner一样，它抛出：TypeError: Cannot read property 'addEventListener' of null。

我试图添加它自己的范围（到指令），但根本不起作用。

angular.module('sbAdminApp').directive('addFile',function() {
    return {
        templateUrl:'static/app/scripts/directives/addFile/addFile.html',
        restrict: 'E',
        replace: true,
        controller:function($scope, $log, uiUploader){
            console.log('cokolwiek');

                $scope.btn_remove = function (file) {
                    $log.info('deleting=' + file);
                    uiUploader.removeFile(file);
                };
                $scope.btn_clean = function () {
                    uiUploader.removeAll();
                };
                $scope.btn_upload = function () {
                    $log.info('uploading...');
                    uiUploader.startUpload({
                        url: '/api/file',
                        concurrency: 2,
                        onProgress: function (file) {
                            $log.info(file.name + '=' + file.humanSize);
                            $scope.$apply();
                        },
                        onCompleted: function (file, response) {
                            $log.info(file + 'response' + response);
                        }
                    });
                };


                $scope.files = [];

                var element = document.getElementById('file1');
                console.log('document.getElementById()', element);
                element.addEventListener('change', function (e) {
                    var files = e.target.files;
                    uiUploader.addFiles(files);
                    $scope.files = uiUploader.getFiles();
                    $scope.$apply();
                });


        }
    }
});

html代码：

<div id="uploader">
    <div class="page-header">
        <h1>Uploader</h1>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h3>Dodaj załącznik</h3>

            <div class="well">
                <div>
                    <div style="float:right;">
                        <button ng-click="btn_upload()">Dodaj wszystskie</button>
                        <button ng-click="btn_clean()">Usuń wszystkie</button>
                    </div>
                    <input type="file" id="file1" multiple name="file"/>
                </div>
                <div ng-repeat="file in files" style="margin-top: 20px;border-bottom-color: antiquewhite;border-bottom-style: double;">
                    <div><span>{{file.name}}</span><div style="float:right;"><span>{{file.humanSize}}</span><a ng-click="btn_remove(file)" title="Remove from list to be uploaded"><i class="icon-remove"></i></a></div>
                    </div>
                    <progress style="width:400px;" value="{{file.loaded}}" max="{{file.size}}"></progress>
                </div>
            </div>
        </div>

    </div>
</div>

我如何运行指令：

<add-file></add-file>