javascript - 显示加载叠加层，直到加载 $http get 图像

Question

我想在从我的 $http get 加载内容时显示加载动画(理想情况下显示加载量的百分比)。

我已经尝试过，但它似乎并没有隐藏我想要隐藏的内容。

我设置了时间长度 - 但我不希望它在设定的时间内显示加载叠加层。我希望它显示加载叠加层(可能直到加载至少 3 个图像？)，直到加载元素。

这是我在 plunker 中的尝试: http://plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview

 .factory('cardsApi', ['$http', '$ionicLoading', '$timeout', function ($http, $ionicLoading, $timeout) {
        var apiUrl = 'http://mypage.com/1/';

        $ionicLoading.show({
            duration: 3000,
            noBackdrop: true,
            template: '<p class="item-icon-left">Loading stuff...<ion-spinner icon="lines"/></p>'
        });


        var getApiData = function () {
            return $http.get(apiUrl).then($ionicLoading.hide, $ionicLoading.hide);
        };

        return {
            getApiData: getApiData,
        };
    }])

    .controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
        function ($scope, TDCardDelegate, cardsApi, $http) {

            $scope.cards = [];

                cardsApi.getApiData()
                    .then(function (result) {
                        console.log(result.data) //Shows log of API incoming
                        $scope.cards = result.data;
                        $scope.product_id = result.data.product_id;
                    })
                    .catch(function (err) {
                        //$log.error(err);
                    })

Answer 1

从 $ionicLoading.show 声明中删除持续时间行。

duration: 3000,

所以它看起来像:

$ionicLoading.show({
    noBackdrop: true,
    template: '<p class="item-icon-left">Loading stuff...<ion-spinner icon="lines"/></p>'
});

这应该可以工作(至少在 plunker 中是这样)。 uration属性指定何时关闭ionicLoading实例，并且不等待ionicLoading.hide()。