Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call jQuery properly from an AngularJS controller

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?

like image 674
kitofr Avatar asked May 31 '12 08:05

kitofr


People also ask

Can we use jQuery in AngularJS?

Does AngularJS use the jQuery library? Yes, AngularJS can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, AngularJS falls back to its own implementation of the subset of jQuery that we call jQLite.

How do you call a jQuery function in angular 13?

We can write jQuery code inside the method ngOnInit, To add the action to the button we created in app. component. html, we add a button. click event inside ngOnInit method.

How do you call a function in AngularJS?

You can call your angularJS function from javascript or jquery with the help of angular. element().

Is AngularJS better than jQuery?

jQuery is easier to understand than Angular that is said to have a learning curve. Everything from DOM manipulation, Ajax calls, to delegating events and adding elements, jQuery makes it quite easy to get a handle on.


1 Answers

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.

like image 167
ganaraj Avatar answered Nov 09 '22 03:11

ganaraj