指令不能绑定组件?

时间:2016-09-30 21:59:30

标签: javascript angularjs angularjs-directive angularjs-components

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

我在指令egFiles中绑定到change的函数中设置断点。但是,当我通过单击按钮选择文件时,永远不会触发断点?

0 个答案:

没有答案