在angular JS中,如何执行一行JQuery代码?
在视图中我有这个:
Classification Date {{result.result}} {{result.date}}
我想使用浮动标题,但是当页面第一次加载时表格是空的,它给了我奇怪的结果( http://www.fixedheadertable.com/ )
如果表内容是静态的,这可以正常工作:
$(document).ready(function() { $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false }); });
在控制器中我有这个function,按下按钮后加载数据:
$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的行或者如何从我的控制器调用它。
您可以使用作用域中的范围事件$emit
或$broadcast
和$on
来在适当的时候调用jQuery函数。
$emit
和$broadcast
之间的区别:
- $ broadcast – 将事件向下发送到所有子范围,
- $ emit – 通过范围层次结构向上调度事件。
这个例子将有助于理解它: http : //jsfiddle.net/sebmade/GkarV/
没有什么可以阻止你这样做:
$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
并重新初始化它。