Angular NG-шоу все еще показывает div после того, как значение становится ложным

0

Я пытаюсь использовать 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>
  • 0
    Вы должны опубликовать асинхронный материал, который происходит
  • 0
    Даже в приведенном выше упрощенном примере происходит то же самое поведение, отображаются оба элемента div.
Показать ещё 4 комментария
Теги:

4 ответа

0
Лучший ответ

Я смог исправить это, используя вместо этого $ rootScope. Это, как говорится, я понятия не имею, почему это работает, а $ scope - нет.

0

Я думаю, что вам нужна реальная логика, чтобы создать перемену от ложного до истинного. Чтобы расширить ответ 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>
0

обновленный

<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.

0

Вы можете попробовать обернуть его в таймаут:

// 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); как средство для временного изменения после определенного периода времени.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню