Question

当我第一次调用该函数时没有任何反应，但在第二次点击时它工作正常。在后续点击结果显示上一次点击。以下是我的代码

 <table class="table">

        <thead>
        <tr class="text-center" style="font-weight: bold">
            <td></td>
            <td>Name</td>
            <td>ID</td>
            <td>Age</td>
            <td>Registered On</td>
            <td>View Prescription</td>
        </tr>
        </thead>
        <tr ng-repeat="x in patientList | filter:filter_patient_list" class="text-center">
            <td>{{x.list}}</td>
            <td>{{x.name}}</td>
            <td>{{x.patient_id}}</td>
            <td>{{x.age}}</td>
            <td>{{x.date_registered}}</td>
            <td><button data-toggle="modal"  data-target="#view_prescription_from_patient_list{{x.patient_id}}" ng-click="getPrescriptionModal(x.patient_id)">/button></td>

        </tr>

    </table>

下面是我的angularJs代码

$scope.getPrescriptionModal = function(patient_id)
{

    $http.get("ajax_get_data.php?get_what=prescription_list_for_patient_list&patient_id="+patient_id).success(function(response2)
    {
        $('#view_prescription_from_patient_list'+patient_id).modal('show');
        $('.modal_show').append(response2);

    }).error(function()
    {
        alert("Unable to fetch");
    })

}

和我的php代码获取模态窗口

    if($get_what == "prescription_list_for_patient_list")
{

    $patient_id = $_GET['patient_id'];
echo"
<div class='modal fade' id='view_prescription_from_patient_list$patient_id' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <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>
        <h4 class='modal-title' id='myModalLabel'>Modal title</h4>
      </div>
      <div class='modal-body'>
        ...
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-primary'>Save changes</button>
      </div>
    </div>
  </div>
</div>
";

我尝试用Jquery调用Ajax也有同样的问题。

Answer 1

似乎你试图在DOM中存在一个模态之前打开它。

首先尝试将回复附加到<body>，以便用于搜索它的选择器将存在。

如果您使用的ID仍然只在响应html中，则使用$('#id')搜索现有DOM元素，因此无法找到它

$http.get(url, function(response){
    $('body').append(response);
    $(selector).modal();
});

或者你也可以试试;

$(response).modal();

我不确定引导程序是否会自动将响应附加到DOM或不这样做。

还强烈建议摆脱bootstrap.js并使用angular-ui-bootstrap指令。

Bootstrap模式仅在第二次调用时显示

1 个答案: