Question

在视图中我有这个：

     <table class="table table-bordered" id="resultsTable">
        <thead>
          <th>Classification</th>
          <th>Date</th>
        </thead>
        <tr ng-repeat="result in results">
          <td>{{result.result}}</td>
          <td>{{result.date}}</td>
        </tr>
      </table>

我想使用浮动标题，但是当首次加载页面时表格为空，它会给我带来奇怪的结果（http://www.fixedheadertable.com/）

如果表格内容是静态的，这可以正常工作：

$(document).ready(function() {
  $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false   });
});

在控制器中我有这个功能，按下按钮后加载数据：

 $scope.loadResults = function() {
    var url = "URL WITH QUERY";
    $http.get(url).success(
      function(data, status, headers, config) {
        for (var i = 0; i < data.length; i++) {
            $scope.results.push({date: data[i].date, p: data[i].p, result: data[i].result});
        }

//**IDEALLY I WOULD WANT TO RUN THE JQUERY LINE HERE**

      }
    );
  };

所以我想要做的是在将所有数据加载到结果数组后，运行我通常在文档就绪时运行的这一行。

你会怎么做？

请提供一个示例，因为我一直在阅读“指令”，但没有人说明它是如何允许调用jquery，应该放置jquery的行或者如何从我的控制器调用它。

Answer 1

您可以使用范围中的范围事件$emit或$broadcast和$on来实现此目的，以便在适当的时候调用jQuery函数。

$emit和$broadcast之间的差异：

$ broadcast - 将事件向下调度到所有子范围，
$ emit - 通过范围层次结构向上调度事件。

此示例有助于理解它：http://jsfiddle.net/sebmade/GkarV/

Answer 2

没有什么可以阻止你这样做：

$scope.loadResults = function() {
    var url = "URL WITH QUERY";
    $http.get(url).success(
      function(data, status, headers, config) {
        for (var i = 0; i < data.length; i++) {
            $scope.results.push({date: data[i].date, p: data[i].p, result: data[i].result});
        }
        $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false   });
      }
    );
  };

但它不被视为最佳做法。

此外，您可能需要等待Angular摘要周期完成，以便处理ng-repeat。你可以使用$timeout()或可能$scope.$evalAsync()来做到这一点（在这种情况下，我不是百分之百确定，它可能仍然会过早发射，因此您需要对其进行测试）。< / p>

更清洁的解决方案是为该插件创建指令。我没有在 Fixed Header Table 插件的文档中看到任何允许动态数据的内容，因此您需要使用promises解决该问题，以确保在数据准备好并呈现后进行初始化或者对结果数组进行监视，以便在插件上调用destroy并重新初始化它。

在angular JS中，如何执行一行JQuery代码？

2 个答案: