エラーデータをバインドする方法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>