Angularjs：能够记录数据但无法显示

Question

我正在尝试创建一个表单，在单击提交时调用一个函数，该函数将发布到 php 页面（运行查询），然后在页面上显示这些结果。

如果我在加载时在我的控制器中调用所述函数，我会得到我的预期结果（数据以模态形式显示在 html 表中）。但是，如果我在单击提交时调用该函数。我可以记录数据结果，但它没有显示在我的页面上。

  $scope.report = {};
  var url = "";
  // calling our submit function.
  $scope.submitForm = function() {

      $http.post('url.php').success(function(data) {
          // Stored the returned data into scope 
          $scope.names = data;
          console.log(data);
          $('#myModal').modal();
      });
  };
		

<button type = "button" class="btn btn-success" ng-click="submitForm()" >Submit Request</button>
<div class="modal fade" id="myModal" role="dialog" >
   <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" >
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
         </div>
         <div class="modal-body">
            <table class="table table-striped table-bordered">
               <tr>
                  <th>Name</th>
               </tr>
               <tr ng-repeat="name in names | filter:search_query">
                  <td><span>{{name.first}}</span></td>
               </tr>
            </table>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

Answer 1

尝试在打开您的模式之前添加一个小的$timeout（不要忘记将$timeout 注入您的控制器）：

$scope.submitForm = function() {

      $http.post('url.php').success(function(data) {
          // Stored the returned data into scope 
          $scope.names = data;
          console.log(data);

          $timeout(function () {
              $('#myModal').modal();
          },250);
      });
  };