Блог

https://plnkr.co/edit/kbz5uimNZ6vKTiT9QB6a?p=preview
Обновление: создано для тестирования.

У меня есть следующая директива egFiles для обработки статуса <input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" /> для загрузки файла.

 (function () {
    'use strict';
    angular.module('myApp').directive('egFiles', egFiles);

    function egFiles() {
        var directive = {
            link: link,
            restrict: 'A',
            scope: {
                files: '=egFiles',
                hasFiles: '='
            }
        };
        return directive;

        function link(scope, element, attrs) {
            element.bind('change', function () {
                scope.$apply(function () {
                    if (element[0].files) {
                        scope.files.length = 0; // Breakpoint not hit here
                        angular.forEach(element[0].files, function (f) {
                            scope.files.push(f);
                        });
                        scope.hasFiles = true;
                    }
                });
            });

            if (element[0].form) {
                angular.element(element[0].form)
                        .bind('reset', function () {
                            scope.$apply(function () {
                                scope.files.length = 0;
                                scope.hasFiles = false;
                            });
                        });
            }
        }
    }
})();
  

Следующий компонент Anguar 1.5 для использования директивы.

 (function (undefined) {
    'use strict';

    angular.module('myApp')
    .component('doc', {
        template: '...
<input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" />
     ....',
        bindings: {
            id: '<',
            "$router": '<'
        },
        controllerAs: 'model',
        controller: [controller]
    });

    function controller() {
        var model = this;

        model.$routerOnActivate = function (next, previous) {
            model.id = next.params.id;
        }

        model.hasFile = false;
        model.uploading = false;
    }
})();
  

Я установил точку останова в функции, связанной change с директивой egFiles. Однако точка останова никогда не достигается, когда я выбираю файл нажатием кнопки?