Angularjs 如何仅在调用 init 方法后加载 div 内容

Question

我是 AngularJs 的新手，最初是在页面加载时。当 loadResponseData() 正在处理时，我需要显示进度 div，在 ajax 调用完成后需要显示带有响应数据的成功 div。但是在 loadResponseData() 完成后没有显示成功。有没有办法在完成 ajax 调用之前显示进度条，并且应该在从 ajax 调用收到响应后显示成功 div。对不起我的英语，请拯救我的一天。

<%

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

在here$timeout指令中尝试使用此示例替换$http并使用ng-show代替ng-ifvar app = angular.module('app',[]);app.controller('payCtrl',function($timeout,$scope){&nbsp; &nbsp; $scope.status = "progress"; //by default set as progress&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $scope.loadResponseData = function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log("yes called");&nbsp; &nbsp; &nbsp; &nbsp; $timeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$scope.status = "success";&nbsp; &nbsp; &nbsp; &nbsp; },2000);&nbsp; &nbsp; }});<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">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-12 col-md-12 col-sm-12 col-lg-8 center">&nbsp; &nbsp; &nbsp; <form id="response" class="success">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row row-space" ng-show="status== 'success'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>success code loaded</h1>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row row-space" ng-show="status== 'progress'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Progress code loaded</h1>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; &nbsp; <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">&nbsp; <div class="col-12 col-md-12 col-sm-12 col-lg-8">&nbsp; &nbsp; <form id="response">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row row-space" ng-if="vm.status=='success'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // load response data in elements&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row row-space" ng-if="vm.status=='progress'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Progress bar takes place&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </form>&nbsp; &nbsp;</div>&nbsp;<div>并且在控制器使用var vm = this;代替$scope;&nbsp;var vm = this;&nbsp;vm.loadResponseData = function() {&nbsp;vm.post(contextRoot + getResponseData(function(data) {&nbsp; &nbsp; var status = sessionStorage.getItem("status");&nbsp; &nbsp; vm.status&nbsp; = status ;&nbsp; &nbsp; sessionStorage.setItem('data', JSON.stringify(data));&nbsp;});};