0

I have created simple angular directive. The html code runs fine, but I think the .js code is never run. E.g. I try to print the simple word and it doesn't react:

The second bug is when I want to get the element by id from html file, like in line where I want to use addActionListiner, it throws: TypeError: Cannot read property 'addEventListener' of null.

I have tried to add it's own scope (to the directive), but doesn't work at all.

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


        }
    }
});

The html code:

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

How I run the directive:

<add-file></add-file>
bielas
  • 672
  • 2
  • 12
  • 29

0 Answers0