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

【问题标题】：In angular JS, how to execute a line of JQuery code?在angular JS中，如何执行一行JQuery代码？
【发布时间】：2013-05-28 11:20:10
【问题描述】：

在我看来是这样的：

     <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**

      }
    );
  };

所以我想做的是在将所有数据加载到 results 数组之后，运行我通常会在准备好文档时运行的这一行。

你会怎么做？

请，请提供一个示例，因为我一直在阅读有关“指令”的内容，但没有人说它究竟如何允许调用 jquery，应将所需的 jquery 行放在哪里或如何从我的控制器调用它。

【问题讨论】：

您对 jquery 位置的评论不正确。需要在函数内部
@galchen AngularJS 是否保证同步地从模型更改中进行 DOM 操作？
@galchen 已修复。 @user 这是不正确的，但我想展示我想要实现的目标
我认为你可以使用事件来解决这个问题。我不确定 DOM 操作是否是同步的，但我假设在更新 $scope.results 数组后使用 $emit 可以解决问题

标签： javascript jquery angularjs

【解决方案1】：

您可以简单地在您的范围内使用范围事件$emit 或$broadcast 和$on 来在适当的时间调用jQuery 函数。

$emit 和 $broadcast 之间的区别：

$broadcast -- 将事件向下分派到所有子范围，
$emit -- 通过作用域层次向上调度事件。

这个例子将有助于理解它：http://jsfiddle.net/sebmade/GkarV/

【讨论】：

这个例子是相反的。我看到控制器发出并接收了一个事件。我想要一个从控制器发出的事件，并被其他运行 jquery 的东西拾取
如果您想从$scope 中提取该事件，那么您可以使用$rootScope。
另外，我在这种情况下看到了另一种选择。您可以使用$q.when(value) 来保持函数调用，直到value 未解决。 -- $q.when

【解决方案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() 来做到这一点（我不能100% 确定在这种情况下的后续工作，它可能仍然过早触发，因此您需要对其进行测试）。

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

【讨论】：