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。

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

3 个答案: