angularjs ng-show задерживает отображение div

Я довольно новичок в 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>

Я получил обработчик события onchange из здесь.

Мой контроллер js имеет следующую функцию:

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

Поэтому, когда выбран файл (отличный от предыдущего или первого), onchange должен сработать и вызвать fn выше, который устанавливает флаг в значение true, что затем должно отображать содержимое div.

Проблема в том, что для отображения div требуется от 30 до 60 секунд. Когда я устанавливаю точку останова в функции выше и выбираю файл, функция вызывается сразу. Выбранный мной файл имеет размер менее 1 КБ, поэтому он очень маленький. Похоже, задержка происходит где-то на уровне Angular. Может ли это быть так? Кто-нибудь знает, почему это может происходить? Заранее спасибо. Это происходит как в IE, так и в Chrome.


onchange angularjs ng-show
person Jefito    schedule 12.06.2015    source источник
comment
Можете ли вы предоставить скрипку, где мы можем воспроизвести это поведение?   -  person Gonzalo.-    schedule 12.06.2015
comment
@Tom ng-change не поддерживает ввод файлов: заголовок stackoverflow.com/questions/17922557/   -  person Jefito    schedule 12.06.2015
comment
вам нужно применить область действия после внесения изменений $scope.$apply()   -  person Pankaj Parkar    schedule 12.06.2015
comment
@pankajparkar вот оно что. Я дал это Numyx, так как он дал это как правильный ответ.   -  person Jefito    schedule 13.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

Проблема здесь в том, что вы изменяете переменную области видимости извне, которую angular не может распознать. Изменение будет применено только в следующем цикле дайджеста. Вы можете исправить это, добавив $scope.$apply:

onchange="var scope = angular.element(this).scope(); scope.vm.displaySelectedXml(); scope.$apply()"
person Numyx    schedule 12.06.2015
comment
Работает как шарм. Благодарю вас! - person Jefito; 13.06.2015

arrow_upward
0
arrow_downward

Гораздо более чистый способ добиться того же эффекта:

<input type="file" id="sampleFile" ng-change="vm.displaySelectedXml()">
person Simon Malinge    schedule 19.11.2015