Угловое наложение (спиннер), когда у нас есть несколько запросов

0

У меня есть панель HTML и привязывается к контроллеру, в контроллере у меня есть 4 вызова сервера для получения моих данных, мой вопрос в том, как я могу показать spinner или overlay поверх этой панели до тех пор, пока не будут разрешены все запросы на сервер и Я могу показать данные плавно.

<div class="container-fluid margin10 padding10 myPanel">
    <div class="row-fluid name" ng-bind-html="viewData.msg.name"></div>
    <div class="row">
        <div class="col-md-11">
            <div ng-bind-html="'&bull; ' + (viewData.msg.filtersStr | limitTo: 140) + (viewData.msg.filtersStr.length > 140 ? '...' : '')" ng-attr-title="{{viewData.msg.filtersTooltipStr}}"></div>
        </div>        
    </div>

    <div class="row top-buffer-margin">
        <div class="col-md-4 text-right">
            <div class="col-md-8"><span class="font10" translate="msgs.details.confidence"></span>:</div>
            <span ng-bind-html="viewData.msg.severity" ng-class="viewData.msg.severityColor" class="font10 col-md-4 confidence-span"></span>
        </div>
    </div>

    <hr>
    <table class="table-striped col-md-12 top-buffer-margin">
        <thead>
        <tr>
            <th class="col-md-3"></th>
            <th class="col-md-2 text-center" ng-bind-html="'<i>' + ('msgs.details.countColHead' | translate) + '<i>'"></th>
            <th class="col-md-4 text-center" ng-bind-html="'<i>' + ('msgs.details.dynamicCalculation' | translate) + '<i>'"></th>
            <th class="col-md-3 text-right" ng-bind-html="'<i>' + ('msgs.details.CalculationColHead' | translate) + '<i>'"></th>
        </tr>
        </thead>
        <tbody>
        <tr class="">
            <td class="col-md-3">                
                <div><span translate="msgs.details.number1"></span></div>
            </td>
            <td class="col-md-2 text-center">
                <span ng-bind="viewData.msg.number1.dynamicCount "></span>               
            </td>
            <td class="col-md-4 text-center" >
                <span ng-bind="viewData.msg.number1.dynamicCalculation "></span>

            </td>
            <td class="col-md-3 text-right"
                ng-bind="(viewData.msg.number1.percentageCalculation > 0 ? '+' : '') + viewData.msg.number1.percentageCalculation + '%'">
            </td>
        </tr>
        <tr class="">
            <td class="col-md-3">                
                <div><span translate="msgs.details.number2"></span></div>
            </td>
            <td class="col-md-2 text-center">
                <span ng-bind="viewData.msg.number2.dynamicCount "></span>                
            </td>
            <td class="col-md-4 text-center">
                <span ng-bind="viewData.msg.number2.dynamicCalculation "></span>
            </td>
            <td class="col-md-3 text-right"
                ng-bind="(viewData.msg.number2.percentageCalculation > 0 ? '+' : '') + viewData.msg.number2.percentageCalculation + '%'">
            </td>
        </tr>
        <tr class="">
            <td class="col-md-3">                
                <div><span translate="msgs.details.number3"></span></div>
            </td>
            <td class="col-md-2 text-center">
                <span ng-bind="viewData.msg.number3.dynamicCount "></span>

            </td>
            <td class="col-md-4 text-center">
                <span ng-bind="viewData.msg.number3.dynamicCalculation "></span>               
            </td>
            <td class="col-md-3 text-right"
                ng-bind="(viewata.msg.number3.percentageCalculation > 0 ? '+' : '') + viewData.msg.number3.percentageCalculation + '%'">
            </td>
        </tr>
        </tbody>
    </table>   
</div>

Контроллер выглядит так:

(function() {
    'use strict';

    angular.module('myApp')
        .controller('myController', myController);

    /** @ngInject */
    function myController($scope, BinsResource, msgEvents, appConstants) {

        var msg = null;
        $scope.viewData = {msg: {}};

        var init = function() {


        }


        var getMsgDetails = function() {


            msg = $scope.selectedMsg;
            //
            $scope.viewData.msg = {
                ruleName: msg.ruleName,
                date: moment.utc(msg.time).format('YYYY-MM-DD'),
                time: moment.utc(msg.time).format('HH:mm'),
                severity: msg.severity,
                severityColor: msgsService.getSeverityClassColor(msg.severity, appConstants),
                number1: buildEventsData(msg, appConstants.measureType.number1),
                number2: buildEventsData(msg, appConstants.measureType.number2),
                number3: buildEventsData(msg, appConstants.measureType.number3)         
            };

            var params = prepareDataForBinsHttp(msg);

            //number1
            BinsResource.post('number1', params).then(
                function(response) {

                    var calculationObject = calculateCalculation(response.data.Interval, msg);
                    $scope.viewData.msg.number1.dynamicCalculation = calculationObject.calculation;                    
                    $scope.viewData.msg.number1.dynamicCount = calculationObject.count;

                },
                function(error) {
                    //TODO : Display callback error
                }
            );

            //number2
            BinsResource.post('number2', params).then(
                function(response) {

                    var calculationObject = calculateCalculation(response.data.Interval, msg);
                    $scope.viewData.msg.number2.dynamicCalculation = calculationObject.calculation;                    
                    $scope.viewData.msg.number2.dynamicCount = calculationObject.count;
                },
                function(error) {
                    //TODO : Display callback error
                }
            );

            //number3
            BinsResource.post('number3', params).then(
                function(response) {
                    var calculationObject = calculateCalculation(response.data.Interval, msg);
                    $scope.viewData.msg.number3.dynamicCalculation = calculationObject.calculation;                    
                    $scope.viewData.msg.number3.dynamicCount = calculationObject.count;
                },
                function(error) {
                    //TODO : Display callback error
                }
            );

        }

        //
        $scope.subscribe(msgEvents.message._ALERT_ITEM_SELECTED_, function(selectedMsg){

            $scope.selectedMsg = selectedMsg;

            if(selectedMsg != null){
                getMsgDetails();
            }
        });

        init();
    };

})();

Я хочу, чтобы мой HTML был заблокирован до тех пор, пока getMsgDetails() не выполнит все свои вызовы на сервер и вычисления и не будет готов заполнить HTML-код, как я могу это сделать?

Теги:
spinner
overlay

1 ответ

0

Я думаю, что ваш лучший вариант - использовать следующую угловую библиотеку

https://github.com/McNull/angular-block-ui

Он отобразит счетчик или сообщение загрузки, пока все обещания не будут решены (он также настраивается)

Демо здесь: http://angular-block-ui.nullest.com/#!/

  • 0
    Я попробовал этот компонент, но он дал мне эту ошибку после его установки с bower. Ошибка: [$ compile: tpload] Не удалось загрузить шаблон: angular-block-ui / angular-block-ui.ng.html (состояние HTTP: 404 Не Нашел)
  • 0
    Если она выдаёт вам эту ошибку, это потому, что библиотека не является установленным свойством. Пожалуйста, убедитесь, что HTML-шаблон доступен из вашего приложения. Проверьте файловую систему, ваши зависимости в угловых модулях и так далее.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню