ng-hide не удаляется из класса, даже если ng-show имеет значение true

0

Требование : Показать и скрыть div.

HTML

<div ng-show="IsSuccess">
  My Div Content
 </div>

HTML после загрузки страницы

<div class="ng-hide" ng-show="false">

HTML после обновления с контроллера (http post call)

 <div class="ng-hide" ng-show="true">

ng-show - это true но класс все еще содержит ng-hide

Как решить эту проблему?

Для справки ниже приведен мой контроллер

myController.controller('AuthenticationController',
    function AuthenticationController($scope, $location, authDataService, loginDuration) {
        $scope.Login = {};
        $scope.IsSuccess= false;

        $scope.login = function () {
            authDataService.authenticateUser($scope.Login, $scope).then(
                        function (status) {
                            if (status === 200) {
                                if ($scope.message == 'Login failed') {
                                    $scope.IsSuccess= true;
                                }
                                else {
                                    $scope.IsSuccess= false;
                                }
                            }
                        },
                        function (data) {
                            $scope.ErrorMessage = data.Message;
                        }

                    );
        }
    });
  • 0
    я думаю, что нет необходимости добавлять class='ng-hide' , директива ngShow обрабатывает это сама.
  • 0
    да, я не добавил этот класс. Это было обработано нг-шоу. Пожалуйста, прочитайте внимательно
Показать ещё 16 комментариев
Теги:

3 ответа

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

Поскольку authDataService.authenticateUser возвращает обещание, похожее на него вне углового контекста, угловой не знает, когда изменяется область действия. В этой ситуации вам нужно добавить $scope.$apply()

if ($scope.message == 'Login failed') {
    scope.IsSuccess= true;
}
else {
    $scope.IsSuccess= false;
}

$scope.$apply();

** Изменение: Расширенное объяснение **

Поскольку вы попросили более подробно об этом, я попытаюсь объяснить немного дальше.

$ scope. $ apply() нужно вызывать, когда вне углового контекста. Вот что я имею в виду под углом углового контекста:

$scope.login = function() {

    // inside angular context
    console.log('a');

    setTimeout(function() {

        // outside angular context
        console.log('b');
        $scope.hello = 'b';

        // $scope.$apply() needs to be called
        $scope.$apply();

    }, 1000);

    // inside angular context
    console.log('c');
    $scope.hello = 'c';

};

В этом примере здесь вывод в журнал:

a
c 
// $scope.$apply() is assumed at this point
b

Angular знает, что ему нужно настроить привязки после обработки последней строки $scope.login(), и поэтому $scope.$apply() $scope.login() предполагается тогда, но Angular не знает, есть ли у вас другие функции обратного вызова, которые могут $.ajax позже через другой контекст, другой контекст - setTimeout или jQuery $.ajax или $.Deferred и т.д. Если этот другой контекст изменяет область $, тогда вам нужно вызвать $scope.$apply() вручную обновить Angular привязок.

  • 0
    «Обещание, которое выглядит так, как будто оно находится за пределами углового контекста». Как именно это обещание выглядит?
  • 0
    Например, если вы используете $ .Deferred
Показать ещё 4 комментария
0

Код HTML:

<button class="show-more-btn ng-hide" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()"">Show More</button>

Код Javascript:

setTimeout(function(){ $('.show-more-btn').removeClass('ng-hide'); 
       }, 3000);
0

Если я правильно понимаю ваш вопрос, я бы изменил ваш HTML, чтобы показать <div ng-hide="IsSuccess"> My Div Content </div>

а затем в вашем угловом файле

$scope.login = function () {
    if(<!-- logic to hide or show-->){
        $scope.IsSuccess = false;
    }else{
        $scope.IsSuccess = true; 
    }             
}

Надеюсь, это поможет.

  • 0
    да, вы это хорошо поняли. но это решение не работает.
  • 0
    почему это выглядит как <div class="ng-hide" ng-show="true"> . Я имею в виду нг-скрыть все еще там
Показать ещё 1 комментарий

Ещё вопросы

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