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?
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.
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.
You can call your angularJS function from javascript or jquery with the help of angular. element().
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With