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

在視圖中我有這樣的：在angular JS中，如何執行一行JQuery代碼？

 <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行或者如何從我的控制器調用它。

來源

2013-06-01 LucasSeveryn

您對jquery位置的評論不正確。需要在函數的內部 – galchen

@galchen AngularJS是否可以保證從模型更改中同步操作DOM？ – user2246674

@galchen固定。 @用戶這是不正確的，但我想展示我想實現的目標 – LucasSeveryn

您可以簡單地在您的作用域中使用範圍事件$emit或$broadcast和$on來實現此目的，以在適當的時間調用jQuery函數。 $emit和$broadcast之間

差異：

$廣播 - 向下分派事件到所有子範圍，
$排放 - 通過作用域層級向上調度事件。

這個例子將有助於理解：http://jsfiddle.net/sebmade/GkarV/

來源

2013-06-01 22:36:13 rax

這個例子是其他方式。我看到一個事件被控制器發射和拾取。我想要一個從控制器發出的事件，並由其他可以運行jquery的東西拾取。 – LucasSeveryn

如果你想從'$ scope'中取出那個事件，那麼你可以使用'$ rootScope'。 – rax

另外，在這種情況下，我還看到另外一個選項。您可以使用'$ q.when（value）'來保存函數調用，直到'value'沒有解析。 - [$ q.when]（http://docs.angularjs.org/api/ng.$q#when） – rax

儘管沒有理由這樣做，阻止你：

$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 digest週期完成，以便ng-repeat已被處理。你可以使用$timeout()或者$scope.$evalAsync()（我在後面的例子中並不是100％確定，它可能仍然會啓動得太早，所以你需要測試它）。

更乾淨的解決方案是爲該插件創建一個指令。我在固定標題表插件的文檔中沒有看到任何內容以允許動態數據，所以您需要解決該問題，以確保在數據準備好並呈現之後發生初始化，或者觀看結果數組，以便在插件上調用destroy並重新初始化它。

來源

2013-06-01 23:20:17 rtcherry

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

回答

相關問題