Div с ng-show не обновляется после вызова ajax

Очень новый для angular; Я уверен, что мне не хватает чего-то действительно очевидного.

У меня есть форма входа на мою страницу. Я хочу, чтобы форма скрывалась после успешного входа в систему.

Вся моя страница использует один контроллер.

Здесь HTML; Я удалил все поля, кроме полей входа, хотя на одном контроллере есть другой контент:

<div ng-app="Localizer" ng-controller="StoreListCtrl" ng-init="my_occasion = ''">
    <div ng-show="user_signed_in===false">

        <div class="row"><h1>Have an account?</h1>
            <p>Sign in to quickly access addresses saved to your account</p></div>
            <div class="row">
                <div class="data">
                    <input type="username" ng-model="username" name="username" data-placeholder="Username" />
                </div>
                <div class="data">
                    <input type="password" ng-model="password" name="password" data-placeholder="Password" />
                </div>
                <div class="data"> 
                    <div class="syo-acctSignBtn yButtonTemplate" ng-click="login_user()">Sign In<div class="btnArrow iconPosition"></div></div>
                </div>
        </div>
    </div>
</div>

Когда пользователь нажимает кнопку "Вход", запускается функция с именем login_user(). Это работает; если я вручную обновляю страницу, я вижу, что я вошел в систему, и div, который должен быть скрыт, скрыт. Но без обновления страницы, div остается видимым, даже если переменная, на которую он опирается (user_signed_in), обновляется.

Здесь функция login_user в моем контроллере; Я убрал много вещей, включая проверку поля переднего плана:

$scope.login_user = function() {
    $.post('/site/ajax/login/do_login', {'username': $scope.username, 'password': $scope.password}, function(data) {
        if (data.success) {
                    $window.user_state.status = $window.user_status_key.STATE_SIGNED_IN;
            $scope.user_signed_in = $window.user_state.status == $window.user_status_key.STATE_SIGNED_IN;
            console.log("user status: " + $window.user_state.status );
                    console.log("user status key: " + $window.user_status_key.STATE_SIGNED_IN);
                    console.log("scope.user_signed_in: " + $scope.user_signed_in);
        } else {
            Modal({
                title: "Could not Login",
                text: data['errMsg'],
                yellow_button: {btn_text: "OK"}
            });
        }
    });

};

Это результат строк console.log:

Пользовательский статус: подписан ключ статуса пользователя: подписан scope.user_signed_in: true

Так как user_signed_in не равно false, я бы ожидал, что все содержимое формы, показанное внутри div <div ng-show="user_signed_in===false">, будет скрыто. Но это не так (опять же, если я не вручную обновляю страницу.) Что мне не хватает?

Ответ 1

Проблема в том, что вы обновляете переменную (user_logged_in) вне контекста Angular, поэтому Angular ничего не знает об этом (пока вы не обновите страницу, например).

Вы должны обернуть тело своего обратного вызова в $scope.$apply():

$apply() используется для выполнения выражения в Angular извне структуры Angular. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек). Поскольку мы заходим в структуру Angular, нам нужно выполнить правильный жизненный цикл всей обработки исключений, выполняющих часы.

_{(акцент мой)}

Кстати, вы не столкнулись бы с той же проблемой, если бы выполнили свой запрос, используя службу $http, поскольку это Angular -контекстно-ориентированный.

Ответ 2

function ShowLoading($scope) {
$scope.loading = true;
setTimeout(function () {
   $scope.$apply(function(){
            $scope.loading = false;
   });
 }, 2000);
}