Javascript 角度上传，新方法参数消失

嘿，我正在尝试扩展到
在上传之前，我需要做一些客户端验证（对文件进行初步检查，以确保图片的大小+宽度+高度符合我的要求）

但是，当我向方法发送选项时，选项将在controller.scope.UploadTest（选项）中保持未定义状态

指令中的新代码：

angular.module('lr.upload.directives').directive('uploadButton', [
    'upload',
    function(upload) {
        return {
            restrict: 'EA',
            scope: {
                data: '=?data',
                url: '@',
                param: '@',
                method: '@',
                onUpload: '&',
                onSuccess: '&',
                onUploadTest: '&',//added this to test for upload
                onError: '&',
                onComplete: '&'
            },
            link: function(scope, element, attr) {
                var el = angular.element(element);
                var fileInput = angular.element('<input type="file" />');
                el.append(fileInput);
                fileInput.on('change', function uploadButtonFileInputChange() {
                    if (fileInput[0].files && fileInput[0].files.length === 0) {
                        return;
                    }
                    var options = {
                        url: scope.url,
                        method: scope.method || 'POST',
                        forceIFrameUpload: scope.$eval(attr.forceIframeUpload) || false,
                        data: scope.data || {}
                    };
                    options.data[scope.param || 'file'] = fileInput;
                    scope.$apply(function() {
                        scope.onUpload({files: fileInput[0].files});
                    });
                    var uploadTest = true; //make true if function not exists

                    if (typeof scope.onUploadTest === "function") {
                        var functionCheck = scope.onUploadTest(options); //Here my options is fine
                        if (functionCheck === true || functionCheck === false) {
                            uploadTest = functionCheck;
                        }
                    }
                    if (uploadTest) {
                        upload(options).then(function(response) {
                            scope.onSuccess({response: response});
                            scope.onComplete({response: response});
                        }, function(response) {
                            scope.onError({response: response});
                            scope.onComplete({response: response});
                        });
                    } else {
                            scope.onError({response: "UploadTest Failed"});
                            scope.onComplete({response: "UploadTest Failed"});
                    }
                });
            }
        };
    }
]);

$scope.onUploadTest = function(options) {
    console.log(options);
    return false;
};

<div class="btn btn-primary btn-upload" upload-button url="{{url}}" accept="image/*" multiple="false"
on-success="onSuccess(response)" on-error="onError(response)" on-upload-test="onUploadTest(options)" >Upload nyt billede</div>

HTML:

angular.module('lr.upload.directives').directive('uploadButton', [
    'upload',
    function(upload) {
        return {
            restrict: 'EA',
            scope: {
                data: '=?data',
                url: '@',
                param: '@',
                method: '@',
                onUpload: '&',
                onSuccess: '&',
                onUploadTest: '&',//added this to test for upload
                onError: '&',
                onComplete: '&'
            },
            link: function(scope, element, attr) {
                var el = angular.element(element);
                var fileInput = angular.element('<input type="file" />');
                el.append(fileInput);
                fileInput.on('change', function uploadButtonFileInputChange() {
                    if (fileInput[0].files && fileInput[0].files.length === 0) {
                        return;
                    }
                    var options = {
                        url: scope.url,
                        method: scope.method || 'POST',
                        forceIFrameUpload: scope.$eval(attr.forceIframeUpload) || false,
                        data: scope.data || {}
                    };
                    options.data[scope.param || 'file'] = fileInput;
                    scope.$apply(function() {
                        scope.onUpload({files: fileInput[0].files});
                    });
                    var uploadTest = true; //make true if function not exists

                    if (typeof scope.onUploadTest === "function") {
                        var functionCheck = scope.onUploadTest(options); //Here my options is fine
                        if (functionCheck === true || functionCheck === false) {
                            uploadTest = functionCheck;
                        }
                    }
                    if (uploadTest) {
                        upload(options).then(function(response) {
                            scope.onSuccess({response: response});
                            scope.onComplete({response: response});
                        }, function(response) {
                            scope.onError({response: response});
                            scope.onComplete({response: response});
                        });
                    } else {
                            scope.onError({response: "UploadTest Failed"});
                            scope.onComplete({response: "UploadTest Failed"});
                    }
                });
            }
        };
    }
]);

$scope.onUploadTest = function(options) {
    console.log(options);
    return false;
};

<div class="btn btn-primary btn-upload" upload-button url="{{url}}" accept="image/*" multiple="false"
on-success="onSuccess(response)" on-error="onError(response)" on-upload-test="onUploadTest(options)" >Upload nyt billede</div>

上传纽约时报账单

最好的约定是在后端执行此操作，并将错误响应发送回前端，目前还不可能使用angular解析文件。

我不需要angular来解析文件，我可以使用FileReader来解析文件，我所需要的只是将参数发送到我的测试方法。我不同意最好的约定是这样。最好的修道院ion在这两个方面都有它。在客户端，为了确保不进行不必要的数据传输，并在后端检测spoofersOkay，请尝试从HTML中删除onUploadTest属性（在那里没有意义），因为选项不在范围内，它将在HTML中未定义。