AngularJS$http.get微调器使用ng show

我想在

$http.get

期间显示微调器。这是我的代码：

AngularJS部分：

var portalSDM = angular.module('portalSDM', ['ui.router', 'agGrid', 'angular.filter', 'angularSpinkit']);

portalSDM.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state("Default", {});

    $stateProvider

    // PARTIAL MASTERPEGAWAI AND NESTED VIEWS ========================================
    .state('talentapegawai', {
        views: {
            "home": {
                url: '/talentapegawai',
                templateUrl: '/partial-masterpegawai-alltalenta.html',
                controller: function ($scope, $http, $interval) {
                    $scope.prograssing = true;

                    $http.get('http://10.16.107.77:3333/allhistorytalenta').success(function (data) {
                        $scope.prograssing = false;
                    })
                }
            }
        }
    })
});

app.get('/talentapegawai', function (req, res) {
  res.sendFile('partial-masterpegawai-alltalenta.html', { root: __dirname });
});

<a ui-sref="talentapegawai"><button class="btn btn-success btn-xs"><i class=" fa fa-check"></i></button></a>

<wave-spinner ng-show="globalData.prograssing"></wave-spinner>

NodeJS路由器：

var portalSDM = angular.module('portalSDM', ['ui.router', 'agGrid', 'angular.filter', 'angularSpinkit']);

portalSDM.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state("Default", {});

    $stateProvider

    // PARTIAL MASTERPEGAWAI AND NESTED VIEWS ========================================
    .state('talentapegawai', {
        views: {
            "home": {
                url: '/talentapegawai',
                templateUrl: '/partial-masterpegawai-alltalenta.html',
                controller: function ($scope, $http, $interval) {
                    $scope.prograssing = true;

                    $http.get('http://10.16.107.77:3333/allhistorytalenta').success(function (data) {
                        $scope.prograssing = false;
                    })
                }
            }
        }
    })
});

app.get('/talentapegawai', function (req, res) {
  res.sendFile('partial-masterpegawai-alltalenta.html', { root: __dirname });
});

<a ui-sref="talentapegawai"><button class="btn btn-success btn-xs"><i class=" fa fa-check"></i></button></a>

<wave-spinner ng-show="globalData.prograssing"></wave-spinner>

HTML部分：

var portalSDM = angular.module('portalSDM', ['ui.router', 'agGrid', 'angular.filter', 'angularSpinkit']);

portalSDM.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state("Default", {});

    $stateProvider

    // PARTIAL MASTERPEGAWAI AND NESTED VIEWS ========================================
    .state('talentapegawai', {
        views: {
            "home": {
                url: '/talentapegawai',
                templateUrl: '/partial-masterpegawai-alltalenta.html',
                controller: function ($scope, $http, $interval) {
                    $scope.prograssing = true;

                    $http.get('http://10.16.107.77:3333/allhistorytalenta').success(function (data) {
                        $scope.prograssing = false;
                    })
                }
            }
        }
    })
});

app.get('/talentapegawai', function (req, res) {
  res.sendFile('partial-masterpegawai-alltalenta.html', { root: __dirname });
});

<a ui-sref="talentapegawai"><button class="btn btn-success btn-xs"><i class=" fa fa-check"></i></button></a>

<wave-spinner ng-show="globalData.prograssing"></wave-spinner>

微调器：

<wave-spinner ng-show='prograssing'></wave-spinner>

微调器根本不会出现，但是如果我删除

ng show='prograssing'

微调器就会出现

---

如何以正确的方式调用微调器，以便在

$http.get

过程中显示微调器，并在完成后将其隐藏。基本上，它在Http调用之前启动加载程序，在执行成功回调时结束加载程序

var portalSDM = angular.module('portalSDM', ['ui.router','agGrid','angular.filter','angularSpinkit']);

portalSDM.config(function($stateProvider, $urlRouterProvider) {

$stateProvider.state("Default", {});

$stateProvider

// PARTIAL MASTERPEGAWAI AND NESTED VIEWS ========================================
.state('talentapegawai', {
views:{
  "home": { 
    url: '/talentapegawai',
    templateUrl: '/partial-masterpegawai-alltalenta.html',
    controller:function($scope,$http,$interval){
//start loader
        $scope.prograssing = true;
        $http.get('http://10.16.107.77:3333/allhistorytalenta').success(function(data){
            console.log(data);
            $(function(){
                var array = data;
                var res = Enumerable.From(array).GroupBy(function (x) { return x.nip + '&' + x.nama;} ).Select(function (x) { return { key: x.Key(), res:x.Aggregate(function(a,b){
                 var res={};
                 for(p in a)
                    if(p!= 'nip' && p != 'nama')
                        res[p]=a[p];
                  for(p in b)
                    if(p!= 'nip' && p != 'nama' && a[p]==null && b[p]!=null)
                        res[p]=b[p];            


                   return res;
               }) } }).ToArray().map(function(x){
                 x.res.nip=x.key.split('&')[0];
                 x.res.nama=x.key.split('&')[1];
                 return x.res;
               });
               console.log(res); 
               $scope.listtalentapegawai=res;
            })

            var column = Object.keys(data[0]);
            $scope.kolom=column;
            //stop loader
            $scope.prograssing = false;
        });
    }
  }
}
})

});

希望它有帮助

试试这个-

 controller:function($scope,$http,$interval){
          $scope.prograssing = true;
          $http.get('http://10.16.107.77:3333/allhistorytalenta')
              .success(function(data){
                   $scope.prograssing = false;                 
              });
 });

---

这与范围问题有关。这里最快的修复方法是对对象使用

$rootScope

（不推荐使用）。因此，请按如下方式更改代码：

在视图的控制器中：

$rootScope.globalData = $rootScope.globalData || {};
$rootScope.globalData.prograssing = true;

$http.get('http://10.16.107.77:3333/allhistorytalenta').success(function(data) {
    $rootScope.globalData.prograssing = false;
});

在您的HTML中：

var portalSDM = angular.module('portalSDM', ['ui.router', 'agGrid', 'angular.filter', 'angularSpinkit']);

portalSDM.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state("Default", {});

    $stateProvider

    // PARTIAL MASTERPEGAWAI AND NESTED VIEWS ========================================
    .state('talentapegawai', {
        views: {
            "home": {
                url: '/talentapegawai',
                templateUrl: '/partial-masterpegawai-alltalenta.html',
                controller: function ($scope, $http, $interval) {
                    $scope.prograssing = true;

                    $http.get('http://10.16.107.77:3333/allhistorytalenta').success(function (data) {
                        $scope.prograssing = false;
                    })
                }
            }
        }
    })
});

app.get('/talentapegawai', function (req, res) {
  res.sendFile('partial-masterpegawai-alltalenta.html', { root: __dirname });
});

<a ui-sref="talentapegawai"><button class="btn btn-success btn-xs"><i class=" fa fa-check"></i></button></a>

<wave-spinner ng-show="globalData.prograssing"></wave-spinner>

---

阅读有关的详细信息。

您在收到响应时启动进度，而不是在发送请求之前启动进度。我将使用finally（）块来停止进程，否则如果出现http错误，微调器将不会停止旋转。success（）已被弃用，用

$（function（）{

包装代码也没用。@AriefGrando那么您的微调器可能不在该控制器处理的视图中。说“不工作”不够。编辑您的问题，删除代码中所有不相关的内容，但提供所有相关的内容。好的，先生，我已经更新了代码，请给我一个回顾。请告诉我您是否能够在视图中呈现

prograssing

布尔值。尝试

{prograssing}

在视图中检查布尔值是否显示在视图中。这意味着您的视图不受控制器绑定，您在该控制器中定义的

推进

布尔值。尝试调试它或编辑您的问题，并粘贴由控制器绑定的完整

/partial masterpegawai alltalenta.html

。您可以y注入$rootScope并将

$scope.prograssing

替换为

$rootScope.prograssing

以查看加载程序。但是在其自身范围内绑定是一种很好的做法。谢谢@mJunaidSalaat，我没有放置微调器。我没有将其放置在/partial-masterpegawai-alltalenta.html中。谢谢您，我没有将微调器放置在/partial-mas中terpegawai-alltalenta.htmlNo问题。很高兴它解决了：-）