Question

我有一个包含文件输入的指令。在更改文件输入时，我尝试更新一些范围变量，但不会更新它。当注释掉超时时，将取消注释范围变量。

我的印象是angular.element .on函数执行安全应用（触发摘要）。我不确定为什么它需要另一个$超时才能工作，有人可以对这种行为有所了解吗？

问题在下面的plunker中重现。 https://plnkr.co/edit/dHRInri9i21bR0gxe8q1?p=preview

app.directive('fileInput', function($timeout) {
  var directive;

  directive = {
    restrict: 'E',
    templateUrl: 'fileinput.html',
    link: function(scope, element) {
      element
        .find('input')
        .on('change', function(e) {
          console.log(e);
          scope.fileName = 'file name--->' + e.target.files[0].name;
          /*$timeout(function(){
            scope.fileSize = 'fileSize--->' + e.target.files[0].size;
          });*/
        });
    }
  };

  return directive;
});

指令模板：

<input type="file" id="fileUpload" accept="image/*" />
<br>
{{fileName}}
<hr>
{{fileSize}}

Answer 1

element.on使用jqLite或Jquery。因此，在这种情况下使用scope.$apply是有效的，因为element.on不是AngularJs意识

plunker：https://plnkr.co/edit/hohU97QmjASwat139sEV?p=preview

指令中的输入文件更改侦听器不更新范围变量[plunker attach]

1 个答案: