Jak poprawnie wywołać jQuery z kontrolera AngularJS

Question

Próbuję użyć kart jQuery-UI z AngularJS.

Patrz przykład here

Problem polega na tym, że powołanie jQuery("#tabs").tabs(); w sterowniku wydaje się zahaczyć „połowa”, co jest potrzebne do „tabbify” coś.

Pomysły?

Answer 1

Nie powinieneś manipulować DOM w swoim kontrolerze - w ogóle. Zamiast tego powinieneś używać dyrektyw.

I zostały opracowanie zestawu dyrektyw na własny użytek: https://github.com/ganarajpr/Angular-UI-Components

Filozofia jest tylko kropla to proste kawałki kodu w pliku dyrektywami:

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

Następnie w div który chcesz przekonwertować na zakładce:

<div id="mytab" maketab> 

<ul> 
.... 
</ul> 

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

Zauważ, że div i jego struktury dziecko powinny być zgodne co JQuer YUI prosi, aby tak było.

Aby uzyskać bardziej niezawodny przykład i więcej komponentów, sprawdź repozytorium github.