Angularjs как загрузить содержимое div только после вызова метода init

Question

Я новичок в AngularJs, изначально, когда страница загружается, т.е.когда loadResponseData () обрабатывает, мне нужно показать div прогресса, а после завершения вызова ajax нужно показать div успеха с данными ответа.но успех не отображается после завершения loadResponseData ().Есть ли способ показать индикатор выполнения перед завершением вызова ajax и должен показывать div успеха после ответа, полученного от вызова ajax.Извините за мой английский и, пожалуйста, сохраните мой день.

<%
PayBean payBean = (PayBean) session.getAttribute("payData");
%>

<div ng-controller="payCtrl" ng-init="loadResponseData()" id="loadResponseData">

<div class="row">
    <div class="col-12 col-md-12 col-sm-12 col-lg-8">
        <form id="response">
            <div class="row row-space" ng-if="status=='success'">
                // load response data in elements
            </div>
            <div class="row row-space" ng-if="status=='progress'">
                // Progress bar takes place
            </div>
        </form>
    </div>
<div>

Метод в payCtrl:

$scope.loadResponseData = function() {
    $http.post(contextRoot + getResponseData(function(data) {
        var status = sessionStorage.getItem("status");
        $scope.status  = status ;
        sessionStorage.setItem('data', JSON.stringify(data));
    });
};

Answer 1

попробуйте этот пример здесь $timeout замените директиву $http и используйте ng-show вместо ng-if

var app = angular.module('app',[]);
app.controller('payCtrl',function($timeout,$scope){
    $scope.status = "progress"; //by default set as progress
    
    $scope.loadResponseData = function() {
        console.log("yes called");
        $timeout(function(){
             $scope.status = "success";
        },2000);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' class="container" ng-controller="payCtrl" ng-init="loadResponseData()" id="oadResponseData">

  <div class="row">
    <div class="col-12 col-md-12 col-sm-12 col-lg-8 center">
      <form id="response" class="success">
        <div class="row row-space" ng-show="status== 'success'">
          <h1>success code loaded</h1>
        </div>
        <div class="row row-space" ng-show="status== 'progress'">
          <h1>Progress code loaded</h1>
        </div>
      </form>
    </div>
    <div>

Answer 2

Поскольку вы используете директиву ng-if, она создает новую область видимости, поэтому статус не отображается.попробуйте использовать синтаксис controllerAs или используйте директиву ng-hide или ng-show.

Попробуйте это

<div ng-controller="payCtrl as vm" ng-init="vm.loadResponseData()" id="loadResponseData">

<div class="row">
  <div class="col-12 col-md-12 col-sm-12 col-lg-8">
    <form id="response">
        <div class="row row-space" ng-if="vm.status=='success'">
            // load response data in elements
        </div>
        <div class="row row-space" ng-if="vm.status=='progress'">
            // Progress bar takes place
        </div>
    </form>
   </div>
 <div>

и в контроллере используйте var vm = this; вместо $scope;

 var vm = this;
 vm.loadResponseData = function() {
 vm.post(contextRoot + getResponseData(function(data) {
    var status = sessionStorage.getItem("status");
    vm.status  = status ;
    sessionStorage.setItem('data', JSON.stringify(data));
 });
};