angularjs - Angularjs 指令 element.on('change') 没有触发
问题描述
我正在使用这个指令来上传文件。该文件有一个很长的标签。我在尝试上传之前调用了一个函数,如果该函数返回 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);
});
}
}
}
}]);
解决方案
好的,事实证明问题是元素值没有被清除,因此不会触发更改。当 pre 失败并且有效时,我添加了 element.val(null) 。
推荐阅读
- c# - Stream/Byte array to filename/extention/content type
- visual-studio-code - Where to store global binary data for a vscode extension
- mule - Mule http请求将404映射为失败
- spring-boot - 提供 management.port 和 management.context-path 时执行器不工作
- java - 另一个类中的 Java actionListener 不会打开窗口
- firebase - Firebase 对某些特定用户的实时数据库访问
- ruby-on-rails - NoMethodError: nil:NilClass 的未定义方法“created_at”
- spring-integration - 用于过滤的 JdbcMetadataStore
- django - How to handle both save and save-as button with django class-based view
- ruby-on-rails - Browsermob 代理 + Selenium + Ruby 设置给出 550 响应