So rufen Sie jQuery ordnungsgemäß von einem AngularJS-Controller aus

Question

Ich versuche, jQuery-UI-Registerkarten mit AngularJS zu verwenden.

Siehe Beispiel here

Problem, dass jQuery("#tabs").tabs(); im Controller Aufruf ist, scheint zu hook up „Hälfte“, was nötig ist, etwas zu „tabbify“.

Ideen?

Answer 1

Sie sollten DOM Manipulation in Ihrem Controller überhaupt nicht tun. Stattdessen sollten Sie Anweisungen verwenden.

Ich habe für meinen eigenen Gebrauch eine Reihe von Richtlinien zu entwickeln: https://github.com/ganarajpr/Angular-UI-Components

Die Philosophie ist einfach, diese einfachen Stücke in den Richtlinien-Datei Code fallen:

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

Dann wird in den div die Sie möchten, in einem Register konvertieren:

<div id="mytab" maketab> 

<ul> 
.... 
</ul> 

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

Beachten Sie, dass die div und seine untergeordneten Strukturen sollten auf das, was JQuer entsprechen y UI fordert dazu auf.

Für ein robusteres Beispiel und mehr Komponenten, sehen Sie sich das Github Repo an.