angularjs - 带有 ng-show 的 div 在 ajax 调用后不更新

Question

Angular 非常新；我确定我遗漏了一些非常明显的东西。

我的页面上有一个登录表单。我想要发生的是在用户成功登录后隐藏表单。

我的整个页面使用一个 Controller 。

这是 HTML；我已经去除了除了登录字段之外的所有内容，尽管在同一个 Controller 中实际上还有其他内容:

<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在我的 Controller 中运行；我去掉了很多东西，包括前端字段验证:

$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的结果线路:

用户状态:已登录
用户状态 key :已登录
scope.user_signed_in: 真

自 user_signed_in不等于 false ，我希望在 <div ng-show="user_signed_in===false"> 中显示所有表单内容div 隐藏。但它没有(同样，除非我手动刷新页面。)我错过了什么？

Answer 1

问题是您在 Angular 上下文之外更新了变量( user_logged_in )，因此 Angular 对此一无所知(例如，直到您刷新页面)。

您应该将回调的主体包裹在 中 $scope.$apply() :

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

(强调我的)

顺便说一句，如果您使用 执行您的请求，您就不会遇到同样的问题。 $http 服务，因为它是 Angular-context-aware。