I'm trying to use jQuery-UI tabs with angular and thus hooking them up in angular.
See the example here
Problem is that calling jQuery("#tabs").tabs();
in the controller seems to hook up "half" of what's needed to "tabbify" something.
Ideas?
You should not be doing DOM manipulation in your controller - at all. Rather, you should use directives.
I have been developing a set of directives for my own use: https://github.com/ganarajpr/Angular-UI-Components
The philosophy is to just drop this simple pieces of code in the directives file:
.directive('maketab',function() {
return function(scope, elm, attrs) {
elm.tabs({
show: function(event, ui) {
scope.$broadcast("tabChanged",ui);
}
});
};
})
Then, in the div which you would like to convert into a tab:
<div id="mytab" maketab>
<ul>
....
</ul>
<div>...</div>
...
</div>
Note that the div and its child structures should conform to what JQuery UI asks it to be.
For a more robust example and more components, check out the github repo.