12

I'm trying to use jQuery-UI tabs with AngularJS.

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?

1 Answer 1

14

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.

5
  • I have been experiencing the same trouble, even applying the directive stuff (as you can see here) Jun 1, 2012 at 14:31
  • hey @ganaraj, can you bind click handlers programmatically? I'm building an app to graphically build table relationships (from json). So let's say I want to add a new table on the canvas when I right click. how could I go about this? I'm very new to angular but not to Js or Jquery.
    – berto77
    Aug 23, 2012 at 20:26
  • @berto77 You can. I would suggest you to take care of all that inside of a directive though because that seems to be the most logical place to do it. I have been thinking of a way of making angular and canvas work together. I am not sure if they are suitable for each other because they target different use cases...While angular is for web apps, canvas would suit well for games (which I think is a different scenario )
    – Ganaraj
    Aug 23, 2012 at 20:34
  • @ganaraj I disagree. I am currently building a WebGL browser strategy game. Currently I have a canvas with a jquery ui overlay. I am very excited about using angular for my ui components, but the canvas is still a core element for drawing the universe.
    – theblang
    Nov 5, 2012 at 23:46
  • 1
    @mattblang what do you disagree with? If you are putting a directive on a canvas and handling everything inside of that directive that pretty much annuls all the power that angular gives, isnt it? Manipulating the pixels in a canvas seem very "DOM manipulation"y ..So it doesnt seem to naturally fit inside of a controller ..
    – Ganaraj
    Nov 7, 2012 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.