0

我正在尝试在登录失败时触发角度动画（当服务器发送 4xx（例如 403）或未提供凭据时）。

这是控制器：

 .controller('SigninCtrl', ['$scope', '$rootScope', '$cookies', '$state', '$animate', 'signinService', function ($scope, $rootScope, $cookies, $state, $animate, signinService) {
        $scope.signin = function () {
            $scope.shake = false;
            if ($scope.credentials) {
                signinService.signin($scope.credentials, function (status, memberRole) {
                        $scope.shake = false;
                        //TODO: necessary to check status?
                        if (status === 200) {
                           ...
                        }
                    },
                    function () {
                        $scope.shake = true;
                    });
            }
            else {
                //TODO: only shakes/works once!
                $scope.shake = true;
            }
        }
    }]);

表格：

<form class="form-signin" ng-class="{shake: shake}" name="signinForm" ng-submit="signin()" novalidate>
    <h2 class="form-signin-heading signin-title">{{'SIGNIN' | translate}}</h2>
    <input type="email" ng-required name="username" ng-model="credentials.username" class="form-control" placeholder="{{'SIGNIN_FORM_EMAIL'| translate}}"/>
    <input type="password" ng-required name="password" ng-model="credentials.password" class="form-control" placeholder="{{'SIGNIN_FORM_PASSWORD'| translate}}"/>
    <button class="btn btn-lg btn-primary btn-block" type="submit">{{'SIGNIN' | translate}}</button>
    <div class="forgot-password">
        <a ui-sref="sendpasswordresetinformation">{{'SIGNIN_FORM_FORGOTTEN_PASSWORD' | translate}}</a>
    </div>
</form>

但是，如果表单在输入中没有凭据（甚至没有空字符串），表单只会晃动一次。

有人可以帮忙吗？

编辑1：

  .factory('signinService', ['$http', function ($http) {
        return {
            signin: function (credentials, successCallback, errorCallback) {

                var transform = function (data) {
                    return $.param(data);
                }

                return $http.post('/api/signin', credentials, {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    transformRequest: transform
                }).success(function (data, status, headers) {
                    if (status === 200) {
                        successCallback(status, headers('MEMBER_ROLE'));
                    }
                    else {
                        console.log('auth error');
                        successCallback('error');
                    }
                }).error(function(data, status, headers) {
                    console.log("error!", data, status, headers);
                    errorCallback();
                });
            }
        }
    }]);

将控制器更改为：

...
$scope.signin = function () {
            $scope.shake = false;
            $scope.$apply();//ADDED!
            ...

解决了这个问题。谢谢弗洛里本...

4

0 回答 0