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

Question

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

请参阅此处的示例

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

想法？

Answer 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 存储库。