仅当API成功返回数据时才加载模态框

时间:2017-05-09 11:44:21

标签: javascript jquery angularjs twitter-bootstrap

我对uib-modal box有疑问。在我的角度应用程序中,当我们点击按钮EDIT CONFIGURATION时,我们调用模态框,带有配置信息。点击,我们也在API服务器的config中调用load数据的函数。问题是,如果互联网速度很慢并且服务器请求响应需要超过2秒,则模态框将在没有加载数据的情况下打开。如果服务器响应正常,在这种情况下,数据将正常加载。

我的问题是,如何加载模式框,或显示一些微调框,直到加载数据。

这是我调用API

的函数
$scope.setDataInConfigList = function () {
            $scope.parcijalniConfigZaPopUp = "";
            $scope.currentKlupaParcijalniConfig = sveKlupeServiceFactoryConfig.get({klupa: $scope.selected.klupe});
            $scope.currentKlupaParcijalniConfig.$promise.then(function (configParcijalni) {

            $scope.parcijalniConfigZaPopUp = configParcijalni;
            $scope.klupaLedconfigVrijemeRada.ledConfigLedSummerTimeMaxTime = $scope.parcijalniConfigZaPopUp.led_band_config.operating_time_schedule.max_operating_hours_summer ? $scope.parcijalniConfigZaPopUp.led_band_config.operating_time_schedule.max_operating_hours_summer : null;
            $scope.klupaLedconfigVrijemeRada.hotspot_user_time_unlimited = $scope.parcijalniConfigZaPopUp.hotspot_user_time_unlimited ? $scope.parcijalniConfigZaPopUp.hotspot_user_time_unlimited : null; 
    });

    };

和模态框

<button type="button" id="add_new_bench" class="btn btn-default" style="color:#000;" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" ng-click=" setDataInConfigList(currentItemtBench.id)">{{'EDIT_CONFIGURATION'| translate}}</button>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <parcijalni-config></parcijalni-config>
            </div>
        </div>

    </div>

</div>

0 个答案:

没有答案