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

Question

我正在尝试使用AngularJS的jQuery-UI选项卡.

请参阅此处的示例

问题是,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 repo.