ng-change on <input type ="file"

Question

我正在尝试upload()在文件输入更改时运行我的函数.但是,我无法使其发挥作用.

HTML:

<input type="file" ng-model="image" ng-change="uploadImage()">

JS:

$scope.uploadImage = function() {
    console.log('Changed');
}

我究竟做错了什么？

Answer 1

试试这个: - http://jsfiddle.net/adiioo7/fA968/

JS: -

function myCtrl($scope) {
    $scope.uploadImage = function () {
        console.log("Changed");
    }
}

HTML: -

<div ng-app ng-controller="myCtrl">
    <input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage()" />
</div>

Answer 2

这是我制定的指令,可以完成你的要求.如果我没有弄错的话,我认为其他解决方案在生产模式下不起作用,但是这个解决方案确实如此.它是这样使用的:

<input ng-upload-change="fileChanged($event)" />

在你的控制器中:

$scope.fileChanged = function($event){
    var files = $event.target.files;
}

并且指令包含在代码中的某个位置:

angular.module("YOUR_APP_NAME").directive("ngUploadChange",function(){
    return{
        scope:{
            ngUploadChange:"&"
        },
        link:function($scope, $element, $attrs){
            $element.on("change",function(event){
                $scope.$apply(function(){
                    $scope.ngUploadChange({$event: event})
                })
            })
            $scope.$on("$destroy",function(){
                $element.off();
            });
        }
    }
});

此代码将发布到公共域,不需要归属.

您还应该知道,如果有人选择文件,关闭文件输入,然后再次选择同一文件,它将不会再次触发更改功能.为了解决这个问题,我已经创建了一个更完整的指令,每次使用它时都会替换引擎盖下的输入.我把它放在github上:

https://github.com/dtruel/angular-file-input/tree/master