Question

我正在使用此指令上传文件。该文件带有一个很长的标签。在尝试上传之前，我有一个调用的函数，如果该函数返回false，那么我就不想上传，因为他们的用户未提供标签值。

问题似乎是当我只是从element.on（'change'）回调返回时，它再也不会被调用。当一切正常时，当我返回$ .ajax（）时，element.on（'change'）会被触发任意多次。因此，我不确定为什么只调用return会阻止element.on（'change'）在以后的上载尝试中触发。

angular.module('ngSimpleUpload', [])
    .directive('ngSimpleUpload', ['$http', function ($http) {
        return {
            scope: {
                webApiUrl: '@',
                callbackFn: '=',
                errorFn: '=',
                preFn: '=',
                selectedFileFn: '=',
                additionalData: '=',
                buttonId: '@'
            },
            link: function (scope, element, attrs) {

                // original code, trigger upload on change
                element.on('change', function (evt) {
                    var files = evt.__files_ || (evt.target && evt.target.files);
                    Upload(files);
                });

                function Upload(files) {
                    // can bail out of the entire call if preupload returns false
                    if (scope.preFn(scope.additionalData) == false) {
                        return;
                    }

                    var fd = new FormData();

                    angular.forEach(files, function (v, k) {
                        fd.append('file', files[k]);
                        scope.selectedFileFn(files[k].name);
                    });

                    return $.ajax({
                        type: 'POST',
                        url: scope.$eval(scope.webApiUrl),
                        data: fd,
                        async: true,
                        cache: false,
                        contentType: false,
                        processData: false
                    }).done(function (d) {
                        // callback function in the controller
                        scope.callbackFn(d, scope.additionalData);
                    }).fail(function (x) {
                        // callback function in the controller
                        scope.errorFn(x);
                    });
                }
            }
        }
    }]);

Answer 1

好吧，事实证明问题出在元素值没有被清除，因此更改不会触发。当pre失败并且有效时，我添加了element.val（null）。

AngularJS指令element.on（'change'）不触发

1 个答案: