angularjs更新按钮基于文本$http响应ng点击

Question

我正在尝试根据基于点击的$http响应更新按钮值。我想将按钮值更改为正在处理同时使用ng-click功能发出$http请求。根据成功/错误响应，需要更新文本Success和重试等。

我使用ui路由器，我有不同的表单元素分布在不同的状态，例如电子邮件、用户、密码等。

在我看来，我在电子邮件状态中有以下代码

<div ng-controller="RegisterEmailController">
<div class="form-group" style="position: relative;" ng-class="{ 'has-error': form.useremail.$dirty && form.useremail.$error.required && form.useremail.$invalid }">
<input type="email" name="useremail" id="useremail" ng-model="RegisterEmailController.userDetail.useremail" ng-required="true">
<span ng-show="form.useremail.$dirty && form.useremail.$error.required" class="help-block text-sm text-danger pl-4">Oops! Incorrect email address, or field is empty</span>
<span ng-hide="form.useremail.$dirty && form.useremail.$error.required" class="help-block d-block text-sm text-danger px-4">{{ErrorMsg}}</span>
</div>
<button type="button" ng-click="RegisterEmailController.nexStep()">{{buttonTxt}}</button>
</div>

在我的控制器中

var controller = this;
$scope.buttonTxt = 'Next Step';
controller.nexStep = function() {
$scope.buttonTxt = 'Processing...';
if ( validation_conditions ) {
$http({
method: "POST",
url: ApiURL,
headers: { "Content-Type": "application/json" },
data: getData
}).then(function success(response) {
$scope.buttonTxt = 'Success';
}, function error(response) {
$scope.buttonTxt = 'Try Again';
return;
});
} else {
$scope.buttonTxt = 'Try Again';
return;
}
}

有了上面的代码，我无法在点击时更改按钮文本，我也尝试了controller.buttonTxt，但它根本没有在init上打印值。我还尝试了ng-bind指令，但没有成功。

请在我做错的地方帮我。据我估计，$scope可能与控制器中的this(var controller=this；(冲突。

此外，我如何根据响应将成功/错误类添加到输入父元素？

感谢您阅读我的查询，并感谢您提前提供的帮助。

Answer 1

试试这个

var controller = function ($http) {
var validation_conditions
var ApiURL = 'google.com'
var getData = ''
this.buttonTxt = 'Next Step';

this.nexStep = function() {
this.buttonTxt = 'Processing...';
if ( validation_conditions ) {
$http({
method: "POST",
url: ApiURL,
headers: { "Content-Type": "application/json" },
data: getData
}).then(function success(response) {
this.buttonTxt = 'Success';
}, function error(response) {
this.buttonTxt = 'Try Again';
return;
});
} else {
this.buttonTxt = 'Try Again';
return;
}
}
}
controller.$inject = ['$http']
angular
.module('app', [])
.controller('RegisterEmailController',controller);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="RegisterEmailController as ctrl">
<div class="form-group" style="position: relative;" ng-class="{ 'has-error': form.useremail.$dirty && form.useremail.$error.required && form.useremail.$invalid }">
<input type="email" name="useremail" id="useremail" ng-model="RegisterEmailController.userDetail.useremail" ng-required="true">
<span ng-show="form.useremail.$dirty && form.useremail.$error.required" class="help-block text-sm text-danger pl-4">Oops! Incorrect email address, or field is empty</span>
<span ng-hide="form.useremail.$dirty && form.useremail.$error.required" class="help-block d-block text-sm text-danger px-4">{{ctrl.ErrorMsg}}</span>
</div>
<button type="button" ng-click="ctrl.nexStep()">{{ctrl.buttonTxt}}</button>
</div>

Answer 2

尝试使用：

<div ng-controller="RegisterEmailController as $registerEmail">

然后在按钮中：

<button type="button" ng-click="RegisterEmailController.nexStep()">{{$registerEmail.buttonTxt}}</button>