Угловое js ng-show не работает должным образом

Question

У меня есть функция, которая выполняется при отправке моей формы html, если при обработке формы на сервере возникают ошибки, то ошибки возвращаются как json. Я хочу показать эти ошибки пользователю, но по какой-то причине ng-show на моем контейнере div div никогда не отображается.

Html код:

<form class="form-horizontal" role="form" name="registerForm" ng-controller="RegisterController as register" ng-submit="registerForm.$valid && register()" novalidate> 
     <div class="form-group"> 
      <div class="col-md-3"> 
       <label for="email">Email: </label> 
      </div> 

      <div class="col-md-9"> 
       <input type="email" id="email" name="email" ng-model="d.email" class="form-control" ng-required/> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-3"> 
       <label for="password">Password</label> 
      </div> 

      <div class="col-md-9"> 
       <input type="password" id="password" name="password" ng-model="d.password" class="form-control" ng-required/> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-3"> 
       <label for="confPassword">Confirm Password</label> 
      </div> 

      <div class="col-md-9"> 
       <input type="password" id="password_confirmation" name="password_confirmation" ng-model="d.password_confirmation" nx-equal-ex="d.password" class="form-control" ng-required/> 
      </div> 
     </div> 

     <span class="help-block errorMessages" ng-show="d.errors.length"> 
      <div class="alert alert-danger"> 
       <strong>Whoops!</strong> There were some problems with your input.<br><br> 
       <ul class="list"> 
        <li ng-repeat="error in d.errors"><% error %></li> 
       </ul> 
      </div> 
     </span> 

     <div class="form-group"> 
      <div class="col-md-12"> 
       <br/> 
       <hr> 
       <button class="big-red-button" type="submit">Register <i class="glyphicon glyphicon-chevron-right"></i></button> 
      </div> 
     </div> 
    </form> 

Register.js Контроллер:

(function() { 

    angular.module('vendor').controller('RegisterController', ['$http', '$scope', function($http, $scope) { 

     $scope.d = {}; 
     $scope.d.errors = {}; 

     $scope.register = function() { 

      $.ajax({ 
       type: "POST", 
       url: "/auth/register", 
       headers : { 
        'X-XSRF-Token': $("meta[name='csrf_token']").attr("content") 
       }, 
       data: { 
        email: $scope.d.email, 
        password: $scope.d.password, 
        password_confirmation: $scope.d.password_confirmation 
       }, 
       dataType: 'json', 
       success: function(data) { 
        alert(result[0]); 
       }, 
       error: function(xhr, status, err) { 
        var responseJSON = JSON.parse(xhr.responseText); 
        $scope.d.errors = responseJSON; 
        //alert($scope.d.errors.name); 

       } 
      }); 
     }; 

    }]); 

})(); 

Ничего не происходит, когда ошибки возвращаются на страницу, нг-шоу не отображается код.

Answer 1

Использование привязки данных для отображения ошибок:

<ul class="list"> 
<li ng-repeat="error in d.errors"><% error %>{{error}}</li> 
</ul> 

Answer 2

Я мог бы быть неправильно, но $ .ajax является JQuery? Если это так,

Все, что находится за пределами углового юниверса, должно запускать цикл дайджеста вручную.

Итак, у вас есть два варианта.

после $ scope.d.errors = responseJSON добавить

$scope.$apply(); 

Или используйте $http

$http.post({ 
    type: "POST", 
    url: "/auth/register", 
    headers : { 
    'X-XSRF-Token': $("meta[name='csrf_token']").attr("content") 
    }, 
    data: { 
    email: $scope.d.email, 
    password: $scope.d.password, 
    password_confirmation: $scope.d.password_confirmation 
    } 
}).success(
    function(data) { 
    alert(data[0]); 
    } 
).error(function(err, status, headers, conf) { 
    $scope.d.errors = data; 
    //alert($scope.d.errors.name); 
});