Как правильно вызвать jQuery с контроллера AngularJS

Я пытаюсь использовать вкладки jQuery-UI с помощью AngularJS.

См. пример здесь

Проблема в том, что вызов 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 просит.

Для более надежного примера и дополнительных компонентов проверьте репозиторий github.