Javascript “如何绑定错误数据”；无效的用户名和密码"；及；用户名已存在"；在AngularJS

在我的回复中，如果我输入了无效字段，就会显示来自服务器（节点）的“无效用户名或密码”消息。但我不知道如何在我的模板中填充它。我试过很多例子，但没有一个对我有用。如何为它编写服务和控制器？短暂性脑缺血发作

模板：

<div ng-if="messages.error" role="alert" class="alert alert-danger">
    <div ng-repeat="error in messages.error">{{error.msg}}</div>
</div>
<form name="frmRegister" ng-submit="login()" role="form">
    <legend>Log In</legend>
    <div class="form-group" ng-class="{ 'has-error': frmRegister.email.$dirty && frmRegister.email.$error.required }">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required>
        <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required" class="help-block">Email is required</span>
    </div>

    <div class="form-group" ng-class="{ 'has-error': frmRegister.password.$dirty && frmRegister.password.$error.required }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="Password" class="form-control" ng-model="user.password"
            required>
        <span ng-show="frmRegister.password.$dirty && frmRegister.password.$error.required" class="help-block">Password is required</span>
    </div>
    <button type="submit" id="submit" class="btn btn-success">Log in</button>
</form>

 angular.module('MyApp')
            .controller('LoginCtrl', function($scope,$rootScope, $location, $auth, toastr, $http) {
                $scope.login = function() {
                    $http ({
                        method : 'POST',
                        url: 'http://localhost:3000/onio/v1/login',
                        data : $scope.user
                    });
                    $auth.login($scope.user)
                        .then(function() {
                            toastr.success('You have successfully signed in!');
                            $location.path('/');
                        })
                        .catch(function(error) {
                            toastr.error(error.data.message, error.status);
                        });
                };
                $scope.authenticate = function(provider) {
                    $auth.authenticate(provider)
                        .then(function() {
                            $rootScope.currentUser = response.data.user;
                            toastr.success('You have successfully signed in with ' + provider + '!');
                            $location.path('/');
                        })
                        .catch(function(error) {
                            if (error.message) {
                                // Satellizer promise reject error.
                                toastr.error(error.message);
                            } else if (error.data) {
                                // HTTP response error from server
                                toastr.error(error.data.message, error.status);
                            } else {
                                toastr.error(error);
                            }
                        });
                };
    });

---

您需要将服务器中的错误数据绑定到您的作用域，以便在模板中使用。在catch块中，尝试：

.catch(function(error) {
    $scope.error_message = error.data.message
    toastr.error(error.data.message, error.status);
});

然后在html中，您可以在任何需要的地方绑定该错误消息：

<div ng-if="error_message" role="alert" class="alert alert-danger">
    <div>{{error_message}}</div>
</div>

{{error_message}}

能否显示控制器代码，以及服务器端消息如何绑定到作用域？yaa ijust nw添加了我的控制器代码