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

Question

我想在 $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;
                    })
                }
            }
        }
    })
});

NodeJS 路由器：

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

HTML 部分：

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

微调器：

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

微调器根本不显示，但如果我删除 ng-show='prograssing' 微调器会显示。

如何以正确的方式调用微调器，以便在 $http.get 期间显示，完成后隐藏

Answer 1

用这个。基本上它在 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;
        });
    }
  }
}
})

});

希望对您有所帮助

Answer 2

试试这个 -

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

Answer 3

这与作用域问题有关。此处最快的解决方法是对对象使用 $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中：

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

在 scope problem 上阅读更多内容。

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

AngularJS $http.get spinner using ng-show

angularjs

ng-show