[英]Angular js ng-show not working properly
I have a function that executes when my html form is submitted, if there are errors while processing the form on the server the errors are returned as a json. 我有一个在提交html表单时执行的函数,如果在服务器上处理表单时发生错误,则将错误作为json返回。 I want to display these errors to the user, but for some reason the ng-show on my error div container never displays.
我想向用户显示这些错误,但是由于某种原因,我的错误div容器上的ng-show永远不会显示。
Html code: 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 Controller: 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);
}
});
};
}]);
}) ();
Nothing happens when the errors are returned to the page, ng-show does not display the code. 当错误返回到页面时,什么也没有发生,ng-show不显示代码。
Use data binding to show the errors: 使用数据绑定显示错误:
<ul class="list">
<li ng-repeat="error in d.errors"><% error %>{{error}}</li>
</ul>
I might be wrong but $.ajax is a jQuery? 我可能是错的,但是$ .ajax是jQuery吗? If so,
如果是这样的话,
Anything outside angular universe needs to trigger digest cycle manually. 角度宇宙之外的任何事物都需要手动触发摘要循环。
So you got two options. 因此,您有两种选择。
after $scope.d.errors = responseJSON add 在$ scope.d.errors = responseJSON添加之后
$scope.$apply();
$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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.