在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代码？

回答

相关问题