Cách gọi jQuery đúng cách từ bộ điều khiển AngularJS

Question

Tôi đang cố gắng sử dụng các tab jQuery-UI với AngularJS.

Xem ví dụ here

Vấn đề là gọi jQuery("#tabs").tabs(); trong bộ điều khiển dường như để treo lên "một nửa" của những gì cần thiết để "tabbify" một cái gì đó.

Ý tưởng?

Answer 1

Bạn không nên thực hiện thao tác DOM trong bộ điều khiển của mình. Thay vào đó, bạn nên sử dụng chỉ thị.

tôi đã xây dựng một bộ chỉ thị để sử dụng riêng của tôi: https://github.com/ganarajpr/Angular-UI-Components

Triết lý là chỉ cần thả miếng này đơn giản mã trong các chỉ thị file:

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

Sau đó, trong div mà bạn muốn chuyển đổi thành một tab:

<div id="mytab" maketab> 

<ul> 
.... 
</ul> 

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

Lưu ý rằng div và cấu trúc con của nó phải phù hợp với những gì JQuer y UI yêu cầu.

Để có ví dụ mạnh mẽ hơn và nhiều thành phần hơn, hãy xem repo github.