AddEventListener 在 AngularJS 中时断时续

Question

我的代码所做的是调出 "Browse" window 这样我们就可以 select 一个文件。启动浏览 window 没有问题。问题是在我 select 一个文件之后，它不会调用 $scope.manageFileSelect。我之所以这样编码是因为我不想使用标准的浏览按钮。我什至通过在 fileInput 上发送点击来欺骗它。因此，例如，我单击文件 cover.jpg，然后单击确定按钮，它不会在控制台上显示 "Did I get called? Sigh! :("。但是，如果我再次 select cover.jpg，它将起作用。很奇怪。

这是我的代码：

 $scope.manageFileSelect = function(evt) {
  console.log('Did I get called? Sigh! :(');
  var file = evt.currentTarget.files[0];
  $scope.selectedFilename = file.name;
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope) {
      $scope.myImage = evt.target.result;
      $timeout($scope.openImageToThumbnail, 1500);
    });
  };
  reader.readAsDataURL(file);
};

$scope.button = document.getElementById('fileInput');
$scope.button.addEventListener('click', function() {
  console.log('creating listener for manageFileSelect');
  $scope.input = document.createElement('input');
  $scope.input.type = 'file';
  $scope.input.addEventListener('change', $scope.manageFileSelect);
  $scope.input.click();
  console.log('input clicked');
});

Answer 1

当我必须 select 一个文件并存储在一个 javascript 变量中时，这是我使用完全自定义按钮的方式：（请参阅我对 select 同一文件所做的修复）

http://jsfiddle.net/rh63dd9w/

首先你有输入元素：

<button click-target="#inputFile">Select File</button>
<input type="file" fileread="file" id="inputFile" />

指令fileread (source):

myApp.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
                // Thanks to this you can select the same file
                element.val('');
            });
        }
    }
}]);

点击目标指令：

myApp.directive('clickTarget', function () {
    return {
        restrict: 'A',
        scope: {
            target: '@clickTarget'
        },
        link: function (scope, elem, attr) {
            var input = $(scope.target);
            elem.on('click', function () {
                $(input).click();
            });
        }
    };
});

和 css:

#inputFile {
    /* dont use display none because input.click() doesn't work in hiddens elements on some explorers */
    position: absolute;
    left: -300px;
}

AddEventListener 在 AngularJS 中时断时续

AddEventListener is intermittent in AngularJS

getelementbyid

addeventlistener

angularjs