如何从 AngularJS 控制器正确调用 jQuery

Posted 2023-05-09

【中文标题】如何从 AngularJS 控制器正确调用 jQuery

【英文标题】：How to call jQuery properly from an AngularJS controller

【发布时间】：2012-06-05 11:21:26

【问题描述】：

我正在尝试将 jQuery-UI 选项卡与 AngularJS 一起使用。

查看示例here

问题是在控制器中调用jQuery("#tabs").tabs(); 似乎连接了“标签化”某些东西所需的“一半”。

想法？

【参考方案1】：

您根本不应该在控制器中进行 DOM 操作。相反，您应该使用指令。

我一直在开发一组指令供我自己使用：https://github.com/ganarajpr/Angular-UI-Components

原理是把这些简单的代码放到指令文件中：

.directive('maketab',function() 
        return function(scope, elm, attrs) 
            elm.tabs(
                show: function(event, ui) 
                        scope.$broadcast("tabChanged",ui);
                
            );
        ;
    )

然后，在要转换为选项卡的 div 中：

<div id="mytab" maketab>

<ul>
....
</ul>

<div>...</div>
...
</div>

请注意，div 及其子结构应符合 JQuery UI 的要求。

有关更强大的示例和更多组件，请查看 github 存储库。

【讨论】：

我也遇到了同样的麻烦，甚至应用了指令的东西（如你所见here）

嘿@ganaraj，你能以编程方式绑定点击处理程序吗？我正在构建一个应用程序来以图形方式构建表关系（来自 json）。因此，假设我想在右键单击时在画布上添加一个新表格。我该怎么办？我对 Angular 很陌生，但对 Js 或 Jquery 不熟悉。

@berto77 你可以。不过，我建议您处理指令中的所有内容，因为这似乎是最合乎逻辑的地方。我一直在想一种让 Angular 和 canvas 一起工作的方法。我不确定它们是否适合彼此，因为它们针对不同的用例......虽然角度适用于网络应用程序，但画布很适合游戏（我认为这是一个不同的场景）

@ganaraj 我不同意。我目前正在构建一个 WebGL 浏览器策略游戏。目前我有一个带有 jquery ui 覆盖的画布。我对在我的 ui 组件中使用 angular 感到非常兴奋，但画布仍然是绘制宇宙的核心元素。

@mattblang 你不同意什么？如果您在画布上放置一个指令并处理该指令内的所有内容，这几乎取消了 Angular 提供的所有功能，不是吗？操作画布中的像素似乎非常“DOM 操作”y ..所以它似乎并不自然地适合控制器内部 ..