在AngularJS中，如何执行一行JQuery代码？

11 浏览
0 Comments

在AngularJS中，如何执行一行JQuery代码？

我想在初始加载页面时使用浮动表头，但由于表格为空，所以会出现奇怪的结果（参考http://www.fixedheadertable.com/）。如果表格内容是静态的，这个方法就可以正常工作：

在控制器中，我有一个在按下按钮后加载数据的函数：

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

你会怎么做？

请提供一个例子，因为我一直在阅读关于“指令”的内容，但没有人详细说明它如何允许调用jquery，应该将jquery代码放在哪里，或者如何从我的控制器中调用它。

0

2 答案

0 Comments

在AngularJS中，执行一行JQuery代码的方法是可以的，但这并不被认为是最佳实践。此外，您可能需要等待Angular digest cycle完成，以便ng-repeat已被处理。您可以使用$timeout()或可能的$scope.$evalAsync()来实现。一个更清晰的解决方案是为该插件创建一个指令。在"Fixed Header Table"插件的文档中没有提供动态数据的选项，因此您需要使用promise来确保在数据准备和渲染之后进行初始化，或者使用对结果数组的监视来调用插件的destroy方法并重新初始化它。

0
0 Comments

在AngularJS中，如何执行一行JQuery代码？

问题的出现原因是，有一个需求需要在AngularJS控制器中执行一行JQuery代码，但是由于AngularJS使用了自己的作用域和事件机制，直接在控制器中执行JQuery代码是不被支持的。

解决方法是使用作用域事件（$emit或$broadcast）和$on函数来调用JQuery函数。$emit向上派发事件，$broadcast向下派发事件。通过在控制器中触发一个事件，然后在其他地方监听该事件并执行JQuery代码，就可以达到目的。

如果希望在$scope之外捕获该事件，则可以使用$rootScope。

另外，还有一种解决方法是使用$q.when(value)函数来延迟执行JQuery代码，直到value被解析。$q.when函数可以将一个值或者一个返回Promise的函数转换为一个Promise对象。

以下是一个示例代码和相关链接，可以帮助理解问题和解决方法：

// 在控制器中触发事件
$scope.$emit('runJQuery');
// 在其他地方监听事件并执行JQuery代码
$rootScope.$on('runJQuery', function() {
  // 执行JQuery代码
  $('body').css('background-color', 'red');
});
// 使用$q.when延迟执行JQuery代码
$q.when($http.get('api/data')).then(function(response) {
  // 执行JQuery代码
  $('body').css('background-color', 'red');
});

示例链接：[http://jsfiddle.net/sebmade/GkarV/](http://jsfiddle.net/sebmade/GkarV/)

$q.when文档链接：[http://docs.angularjs.org/api/ng.%24q#when](http://docs.angularjs.org/api/ng.%24q#when)

0