angularjs ng-show 延迟显示 div

Question

我是 Angular 的新手。我有一个文件输入

<input type="file" id="sampleFile" onchange="angular.element(this).scope().vm.displaySelectedXml()" />

下面有一个 div：

<div ng-hide="!vm.displayXml">
    <div> xml file display goes here </div>
</div>

我从 here 获得了 onchange 事件处理程序。

我的控制器js有以下功能：

function displaySelectedXml() {
    vm.displayXml = true;
}

因此，当一个文件被 selected（不同于前一个或第一个文件）时，onchange 应该触发并调用上面的 fn，它将标志设置为 true，然后应该显示div.

的内容

问题是 div 需要大约 30 到 60 秒才能显示。当我在上面的函数和 select 文件中设置断点时，会立即调用该函数。我select的文件不到1k，所以很小。似乎延迟发生在 Angular 层的某处。会是这样吗？有人知道为什么会这样吗？提前致谢。这在 IE 和 Chrome 中都会发生。

Answer 1

这里的问题是您从外部更改了范围变量，angular 无法识别。更改只会在下一个摘要周期中应用。您可以通过添加 $scope.$apply:

来解决此问题

onchange="var scope = angular.element(this).scope(); scope.vm.displaySelectedXml(); scope.$apply()"

Answer 2

实现相同效果的更简洁的方法：

<input type="file" id="sampleFile" ng-change="vm.displaySelectedXml()">

angularjs ng-show delay in showing div