在angular JS中，如何執行一行JQuery代碼？

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() （我不是100％肯定在這種情況下稍后工作，它可能仍然太早啟動所以你需要測試它）。

一個更清潔的解決方案是為該插件創建一個指令。 我沒有看到固定標題表插件的文檔中有任何內容允許動態數據，因此您需要使用promises來解決該問題，以確保在數據准備好和呈現后進行初始化，或者觀察結果數組，以便在插件上調用destroy並重新初始化它。