Question

如何在两条路线之间添加loading or please waiting。

例如，当我转到类似于details.html的页面时，此过滤器有 http ，直到页面加载用户才能看到空白页面。

我想要这样的事情：

工厂

 .factory('DrupalNode', function ($http, $stateParams, REMOTE_URL) {

        return {
            node: $http.get(REMOTE_URL + 'all/')

//////////////// please wait

        }
    });

控制器

app.controller('detailController', function($scope, DrupalNode, $state, $window){

    DrupalNode.node.success(function(data){  

/////////disappear waiting text 


        $scope.innerData = data;
        $scope.whichArticle = $state.params.Nid;
        console.log(data);


    });
    $scope.goBack = function() {
        $window.history.back();
    };

});

Answer 1

使用离子的$ionicLoading服务。当你从api得到回复时，在控制器启动时调用show()函数，调用hide()。

  app.controller('detailController', function($scope, DrupalNode, $state, $window, $ionicLoading){
            $ionicLoading.show({
              template: 'Loading text goes here...'
            });
            DrupalNode.node.success(function(data){  
            $ionicLoading.hide();
        /////////disappear waiting text 


                $scope.innerData = data;
                $scope.whichArticle = $state.params.Nid;
                console.log(data);


            });
            $scope.goBack = function() {
                $window.history.back();
            };

        });

如果你想在加载时显示一些文字，那就像这样使用show()

    $ionicLoading.show({
      template: 'Loading text goes here...'
    });

Answer 2

你可以在每个http请求上创建一个http拦截器，这个加载会显示你可以看到我的例子

首先你必须提供服务：

    app.service('LoadingInterceptor', function($rootScope, localStorage, notifications) {
    return {
        request: function(config) {
            if (!(config && config.data && config.data.control && config.data.control.pageOffset !== 0)) {
                $rootScope.$broadcast('loading:show');
            }
            return config
        },

        response: function(response) {
            $rootScope.$broadcast('loading:hide');
             return response
        } 
    }
})

然后你必须将此服务推送到httpProvider

   app.config([
   '$httpProvider',


   function($httpProvider) {

       $httpProvider.interceptors.push('LoadingInterceptor');

   }

]）

然后你需要制作模板并调用$ ioniLoading来显示和隐藏

  app.run(function( $rootScope, localStorage, $ionicLoading) {

            //on broadbanding a 'loading:show' $ionicLoading will appear
            $rootScope.$on('loading:show', function() {
                $ionicLoading.show({
                    template: "Loading...<br/><ion-spinner icon='lines' class='spinner-assertive'></ion-spinner>",
                    noBackdrop: true
                })
            })

            //on broadbanding a 'loading:hide' $ionicLoading will hide
            $rootScope.$on('loading:hide', function() {
                $ionicLoading.hide()
            })

        });

添加加载栏Ionic App - Angular

2 个答案: