javascript - 在 Controller 中更改 AngularJS 中的 ng-style 值

Question

我有一个登录表单，带有一个提交按钮。单击该按钮时，将调用 RESTful Web 服务。如果登录成功，它将用户重定向到另一个页面。如果不是，则应显示带有错误消息的跨度。

我尝试使用 ng-style 来操作显示错误的 span 的 css。

这是我的 span 元素:

<span id="login-error-msg" class="login-error" ng-style="errorMsg">*Wrong Username/Password</span>

在 Controller 中我有以下一行:

$scope.errorMsg = { "display" : "none"};

如果我从服务器收到登录不成功的响应。我这样做:

$scope.errorMsg = { "display": "block" };

但是，没有任何变化，span 元素仍然隐藏。但是，当我再次单击提交按钮时。样式发生变化，跨度可见。

我应该如何解决这个问题？在我看来，跨度是在 $scope.errorMsg 的值更改之前呈现的。

更新:我尝试按照建议使用 ng-show。 这是我的跨度:

<span id="login-error-msg" class="login-error" ng-show="displayError">*Wrong Username/Password</span>

并且，在我设置的 Controller 中:$scope.displayError = false;

最后，当我收到服务器的响应时。我这样做:

$scope.displayError = true;

但是，我仍然遇到同样的问题。如果我输入错误的数据两次，我只会看到变化。一种解决方案可能是重新加载页面，但这似乎没有必要。

更新 2:这是我的 Controller 的全部代码:

myApp.controller('loginController', function($scope, $rootScope, $http, $location, $timeout, SERVER_PATH) {

        $scope.displayError = false;

    $scope.login = function(){

                var username = $scope.username;
                var password = $scope.password;

                var url =  SERVER_PATH + "login/doLogin";

                var jsonObj = JSON.stringify({phoneNumber:username, password:password});

                $.blockUI({ message: '<h1><img src="images/squares.gif" /> Logging in...</h1>' });

                $http.post(url, jsonObj)
                .then(function successCallback(response) {

                        console.log(JSON.stringify(response.data));

                        var jsonResponse = JSON.parse(JSON.stringify(response.data)); 
                        console.log("JSON response status: " + jsonResponse.status);

                        if (jsonResponse.status == 0) {
                        // Login success
                        setTimeout($.unblockUI, 2000);
                        $rootScope.token = jsonResponse.token;
                        console.log("Login success. Token: " + jsonResponse.token);
                        $timeout(function() { $scope.$apply(function() { $location.path("/sign"); }); }, 2000);
                }    

                else {        
                        setTimeout(function() {
                                $.unblockUI();
                                $scope.displayError = true;
                               // $scope.errorMsg = { "display": "block" };
                        }, 2000);

                }

        }, function errorCallback(response) {
                        // called asynchronously if an error occurs
                        // or server returns response with an error status.
                        console.log("An error has occured while sending the data to the server...");
                        setTimeout($.unblockUI, 2000);
                });


};

})

更新 3: 我按照 Damoon Rashidi 的建议将 setTimeout 更改为 $timeout 从而解决了这个问题。

现在我的 else 主体看起来像这样:

$timeout(function(){
                        $.unblockUI();
                        $scope.displayError = true; 
                   }, 2000);

Answer 1

听起来你的摘要循环在第一次点击后没有运行。这取决于您的异步调用的处理方式(Angular 自己的 $http 方法在完成后触发摘要循环)。

在没有其余代码上下文的情况下，如果您在异步操作完成后添加一个 $scope.$apply()，它可能会起作用。

编辑:是的，是 setTimeout 搞砸了。 Angular 无法在超时回调中检查范围内的变化。您可以使用 $timeout(callback, ms) 或手动使用 call $scope.$apply。如果您使用 $timeout，请确保将其注入(inject)您的 Controller 。