Cómo llamar a jQuery correctamente desde un controlador AngularJS

Question

Estoy tratando de usar las pestañas jQuery-UI con AngularJS.

Véase el ejemplo here

problema es que llamar jQuery("#tabs").tabs(); en el controlador parece engancharse "mitad" de lo que se necesita para "tabbify" algo.

Ideas?

Answer 1

No debería estar haciendo la manipulación DOM en su controlador - en absoluto. Por el contrario, debe usar directivas.

he venido desarrollando un conjunto de directivas para mi propio uso: https://github.com/ganarajpr/Angular-UI-Components

La filosofía es dejar caer así de sencillo piezas de código en el archivo de directivas:

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

Luego, en el div que desea convertir en una pestaña:

<div id="mytab" maketab> 

<ul> 
.... 
</ul> 

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

Tenga en cuenta que el div y sus estructuras niño deben ajustarse a lo que JQuer y UI pregunta si lo es.

Para obtener un ejemplo más robusto y más componentes, consulte el repositorio github.