Come chiamare jQuery correttamente da un controller AngularJS

Question

Sto provando a utilizzare le schede dell'interfaccia utente jQuery con AngularJS.

vedere l'esempio here

Il problema è che chiamare jQuery("#tabs").tabs(); nel controller sembra agganciare "metà" di ciò che è necessario per "tabbify" qualcosa.

Idee?

Answer 1

Non si dovrebbe fare manipolazione DOM nel controller, a tutti. Piuttosto, dovresti usare le direttive.

ho sviluppato una serie di direttive per il mio uso: https://github.com/ganarajpr/Angular-UI-Components

La filosofia è quella di cadere solo questo semplice pezzi di codice nel file direttive:

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

Poi, nel div che si desidera convertire in una scheda:

<div id="mytab" maketab> 

<ul> 
.... 
</ul> 

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

si noti che il div e le sue strutture per bambini devono essere conformi a quanto JQuer y UI chiede di essere.

Per un esempio più robusto e più componenti, controllare il repository Github.