文件上传触发两次？

Question

我有以下代码：

.jade：

div(layout="row")
    div(layout="column", flex)
        label(style="margin-left: 5px") File
        md-button(class="md-raised", ng-click="onUploadClicked(3)") Upload
        input(id="image3", type="file", accept=".pdf", file-upload="uploadFile”, style="display: none;")

的.js /控制器：

$scope.uploadFile = function(file) {
    console.log("upload file");
}

$scope.onUploadImageClicked = function(position) {
    console.log("on upload image");
    $timeout(function() {
        document.querySelector('#image' + (position)).click();
    }, 100);
};

upload file的日志打印两次，而on upload image仅在我点击Upload按钮时打印一次，从文件选择器中选择一个文件，按文件选择器中的打开按钮

我的代码中有什么可能导致它触发两次？

更新

尝试添加event.stopPropagation（）但没有运气

我的javascript列表。我只有angular.min.js一个。

Answer 1

I found the root cause! Thanks to @AnthonyC to give me a clue.

I have this directive on 2 different javascripts that are loaded in my Jade file:

app.directive('fileUpload', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var onChangeFunc = scope.$eval(attrs.fileUpload);

            element.bind('change', function(){
                onChangeFunc(element[0].files[0]);
            });
        }
    };
}]);

Ensure there is one directive only in your whole javascripts code!