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

Question

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

模板：

<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); 
          } 
         }); 
       }; 
    }); 

Answer 1

您需要从服务器的错误数据绑定到你的范围，因此它可以在你的模板中使用。在你的catch块尝试：

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