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

Question

我试图在AngularJS中使用jQuery选项卡。

参见示例这里

问题是，在控制器中调用jQuery("#tabs").tabs();似乎将“标签化”所需的“一半”连接起来。

想法？

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。