Question

我被困在获取来自http响应的数据以显示在bootstrap模式中。 angularjs的$ http.get服务会带来一些响应字段，但模态加载太快而无法显示任何这些字段。有时这些字段会出现，但有时则不出现。行为是随机的。如何使用来自http响应的正确数据加载模态。

这是我的GET电话

$scope.getfieldsfromJIRA = function(projectkey, domain, auth, username, password){
                    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;// These are the fields which are to be populated as checkboxes
                                    if(field.required){
                                        $scope.requiredfields[key] = field;
                                        $scope.selectedfields[key] = field;
                                    }
                                    if(bugconfiginfo && bugconfiginfo.jirafields[key]){
                                        $scope.checkedfields[key] = true;
                                    }
                                });
                            });
                        });
                        if(Object.keys($scope.fields).length === Object.keys($scope.selectedfields).length){
                            $scope.selectallcheckboxes = true;
                        }
                        $scope.$apply();
                    }, function errorCallBack(response){
                        alerts.error("Error in finding fields");
                    });

            }

正如您所看到的，我使用了$ scope。$ apply（），但是模式没有刷新以获取更新的字段。

这是我的模态：

<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 || checkedfields[key]"
                                        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>

Answer 1

为什么在收到回复后你不打开模态？你可以在得到回复后手动打开模态：

jQuery('#myModal').modal('show')

如果您认为需要，可以更好地设置一些延迟：

setTimeout(function() { 
jQuery('#myModal').modal('show')
}, 1000);

$ http响应到达后打开bootstrap模式

1 个答案: