Encapsulating jquery ui components as angularjs directives

Question

Is there a library available that can basically take any jquery ui component and turn it into an angularjs directive, with zero configuration required on my part?

In other words, I'm looking for a way to get lots of neat angularjs ui directives "for free".

I doubt it, angular and jQuery have different ways of going about things, jQuery directly manipulates the DOM and depends on looking for particular elements across the DOM to make manipulations. I don't think this is a deficiency of jQuery itself per se but more the widespread untrained masses using it. AngularUI has been very useful for me otherwise I've just found github projects so far to serve my purposes. angular-ui.github.io A specific UI component type you're missing would help. — shaunhusain
– shaunhusain, Commented Aug 2, 2013 at 17:22

Felipe Skinner · Accepted Answer · 2013-08-02 17:39:40Z

3

Why dont you use them as an Angular Service?

I needed to use jQuery Carousel inside my Angular Controller. So I created an app called Animation to host my AnimationService like this

app.js:

'use strict';

var animation = angular.module('animation', []);

service.js:

animation.service('AnimationService', function($timeout) {

    this.carousel = function(element, options) {
        $(element).tinycarousel(options);
    };

});

After that I just need to inject on my angular app:

app.js:

var myApp = angular.module('myApp', ['animation']);

Inject on my angular Controller:

myApp.controller('MyCtrl', function ($scope, $http, AnimationService) {

});

Finally I call the carousel like this (inside my controller):

AnimationService.carousel('.slider', { pager: true });

The first parameter is the element and the second is the jquery.carousel options.

Hope this could help. Let me know if you need any further explanations or examples

answered Aug 2, 2013 at 17:39

Felipe Skinner

16.6k2 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

themirror Over a year ago

This is an awesome answer awesomely written but it does not answer the question about Directives. Gj anyway!

Felipe Skinner Over a year ago

He could use the service on his directive file. But I didn't read the "with zero configuration required on my part" thing. So I guess my answer is wrong and I don't think there's a way to do that :(

Graff Vynda-K · Accepted Answer · 2014-01-20 14:10:41Z

0

Late answer here, but the angular-ui project has a directive called "jQuery Passthrough" which lets you call a jquery function pretty easily from Angular. I've used it a handful of times and for me it has worked great.

I don't think this isn't specifically what you asked for, but if the goal is to easily hook into some jQuery code from Angular without having to write your own directive then this works pretty well. Good luck.

answered Jan 20, 2014 at 14:10

Graff Vynda-K

931 silver badge5 bronze badges

Collectives™ on Stack Overflow

Encapsulating jquery ui components as angularjs directives

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related