кнопка обновления angularjs на основе текста $ http ответы ng-click

Question

Я пытаюсь обновить значение кнопки на основе ответов $ http. Я хочу изменить значение кнопки на Обработка ... при выполнении запроса $ http с помощью функции ng-click. И на основании ответа «Успех / ошибка» необходимо обновить текст Успех и Попробуйте еще раз и т. Д.

Я использую ui-router , и у меня разные элементы формы, распределенные в разных состояниях, например Электронная почта, пользователь, пароль и т. Д.

На мой взгляд, у меня следующий код в состоянии электронной почты.

<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>