angular监听dom为file的input标签的ng-change事件有些问题,
我的老大用的$element.find("id").bind('change',function(){}),但对我这里不适用,我的弹出框不能拿到$element
从stackoverflow上找到了解决办法,原链接https://stackoverflow.com/questions/17922557/angularjs-how-to-check-for-changes-in-file-input-fields在446的位置(回答的人很多,在网页打开滚动条的前半部分),
解决办法是:对input的type为file的标签监听ng-change时,重新包装一个custom-ng-change属性标签来使用,
这需要写一个directive,这个要和你的app.controller同级,不能放到你的app.controller里,不然不起作用
directive.js:(也可以放到controller.js里,单要放到app.controller外面)
app.directive('customOnChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.on('change', onChangeHandler);
element.on('$destroy', function() {
element.off();
});
}
};
});
view.html:
<input type="file" custom-on-change="uploadFile">
controller.js:
app.controller('myCtrl', function($scope){
$scope.uploadFile = function(event){
var files = event.target.files;
};
});
这样就能监听了,注意uploadFile后面没有"()",controller里的function有个event参数这样就能监听了
我的监听结果: