Question

我正在使用从REST调用接收的内容呈现引导模式，但是在内容填充之前会呈现模式。

模式加载事件是单击按钮的，如果我在几秒钟后再次单击该按钮，则模式将显示填充的内容。

如何延迟模态渲染，直到REST调用的内容到达？

模态：

<!--- Get Fields --->

<div class="modal fade" id="myModal" >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Configure Fields</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="row">
           <div class="col-md-6">                 
             <div class="checkbox">
                <label> <strong>Show Fields</strong>&nbsp;</label>
               <input type="checkbox" id="select_all" ng-click="multiSelectCheckBox()">
               <label for="select_all">Select All</label>
             </div>    
           </div>
           <div class="col-md-6">

           </div>
           <hr/> 
           <div class="col-md-12">
              <ul class="columns_3 list-unstyled" data-columns="3">
                        <li ng-repeat="(key,field) in fields">
                            <div class="checkbox">
                                <input type="checkbox" id="jirafield{{$index}}" name="{{key}}"
                                    ng-checked="field.required || selectallcheckboxes || inselectedfields(field)"
                                    ng-disabled="field.required"
                                    ng-model="field.isActive"
                                    ng-click="checkBoxSelect(key,field)"> <label
                                    for="jirafield{{$index}}">{{field.name}}</label>
                            </div>
                        </li>
                    </ul>
           </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info" data-dismiss="modal" ng-click="savefields()">Save</button>
          <button type="button" class="btn btn-cancel" data-dismiss="modal" ng-click="clearselectedfields()">Close</button>
        </div>
      </div>
    </div>
</div>

REST电话：

var getfieldsfromJIRA = function(projectkey, domain, authenticatedToken){
                    return $.ajax
                    ({
                          type: "GET",
                          url: ipAddress+":8089/issue/get?projectKeys="+projectkey+"&domainName=http://"+domain,
                          async: false,
                          headers: {
                            "Authorization": authenticatedToken
                          },
                          success: function (res){
                            console.log(res);

                          }
                        });
                }

JS服务电话：

$scope.getfieldsfromJIRA = function(projectkey, domain, auth, username, password){
                //if(!$scope.fieldssaved){
                    var authenticatedToken = auth +" "+ window.btoa(username+":"+password);
                    projectsettingsfactory.getfieldsfromJIRA(projectkey, domain, authenticatedToken).then(function successCallBack(response){
                        angular.forEach(response.data.projects, function(project){
                            angular.forEach(project.issuetypes, function(issuetype){
                                angular.forEach(issuetype.fields, function(field, key){
                                    $scope.fields[key] = field;
                                    if(field.required){
                                        $scope.requiredfields[key] = field;
                                        $scope.selectedfields[key] = field;
                                    }
                                });
                            });
                        });

                        if(Object.keys($scope.fields).length === Object.keys($scope.selectedfields).length){
                            $scope.selectallcheckboxes = true;
                        }
                    }, function errorCallBack(response){
                        alerts.error("Error in finding fields");
                    });
}

Answer 1

在REST API调用的success函数中编写模态打开调用。点击即可进行API调用，这样，模态肯定会有所请求的数据

Answer 2

setTimeout(function() {
    $('#myModal').modal();
}, 3000);

显示内容之前的模态加载

2 个答案: