Я пытаюсь использовать ng-show для отображения панели загрузки, в то время как любые асинхронные вызовы выполняются в фоновом режиме. Пример с упрощенным кодом ниже, но я обнаруживаю, что оба divs отображаются, а div для загрузки не скрывается после того, как $ scope.page_loaded становится истинным.
Я новичок в Angular, так что это может быть ошибка новобранец.
EDIT: Даже в упрощенном примере ниже, без каких-либо асинхронных вызовов, я получаю оба divs.
controllers.js
controllers.controller('AuthController', ['$scope', '$window', function($scope, $window) {
$scope.page_loaded = false;
// DO SOME LOGIC HERE
$scope.page_loaded = true;
}]);
index.html
<div class="page-content" layout="row" flex layout-align="center center" ng-show="!page_loaded">
<div class="loading">
<p class="loading-text">Loading...</p>
<md-progress-linear md-mode="indeterminate"></md-progress-linear>
</div>
</div>
<div ng-view class="page-content" layout="row" flex ng-show="page_loaded"></div>
Я смог исправить это, используя вместо этого $ rootScope. Это, как говорится, я понятия не имею, почему это работает, а $ scope - нет.
Я думаю, что вам нужна реальная логика, чтобы создать перемену от ложного до истинного. Чтобы расширить ответ Fred: вот плункер
http://plnkr.co/edit/NqZ5YdHzVcoGnceEU3sV?p=preview
$scope.pageloaded = false;
$timeout(function () {
$scope.pageloaded = true;
}, 2000);
<div ng-show="!pageloaded">
Loading...
</div>
<div ng-show="pageloaded">
page_loaded
</div>
обновленный
<div class="page-content" layout="row" flex layout-align="center center" ng-show="page_loaded">
<div class="loading">
<p class="loading-text">Loading...</p>
<md-progress-linear md-mode="indeterminate"></md-progress-linear>
</div>
<div ng-view class="page-content" layout="row" flex ng-show="!page_loaded"></div>
controllers.controller('AuthController', ['$scope', '$window', function($scope, $window) {
$scope.page_loaded = true;
// DO SOME LOGIC HERE
if(SOMETHING_RETURNS_TRUE) {
$scope.page_loaded = false;
///THIS WILL HIDE THE LOADER
}
}]);
Ошибка, которую вы делаете, заключается в том, что вы устанавливаете ее в false, а затем оцениваете значение true при загрузке, поэтому она определенно будет отображаться.
Однако вы можете использовать $ timeout, чтобы установить интервал так же, как с помощью setTimeout в чистом JS, поэтому через какое-то время он возвращает его обратно, чтобы показать последний div.
$timeout(function(){
$scope.page_loaded = false;
}, 5000);
Не забудьте ввести $ timeout.
Вы можете попробовать обернуть его в таймаут:
// DO SOME LOGIC HERE
$timeout(function () {
$scope.page_loaded = true;
)},0);
Не забудьте ввести модуль: controllers.controller('AuthController', ['$scope', '$window', '$timeout', function($scope, $window, $timeout) {
Мне лично не нравится использовать таймауты, но если DOM не обновляется, это может быть обходным путем.
Предположение здесь заключается в том, что ваша//НЕКОТОРНАЯ ЛОГИКА ЗДЕСЬ влияет на изменение вашего $ scope.page_loaded. Тайм-аут заставляет событие в стек позволить браузеру догнать, поэтому он установлен в 0. Мы не используем $ timeout (fn, 0); как средство для временного изменения после определенного периода времени.