Angularjs and jQuery...function return jquery element

Question

I have to use jQuery just because ng-grid needs it. But now I have some problem. In directive, when I try to use angular's element, function returns me jQuery element. But if I remove jQuery from page, everything works just fine.

Is there any way to correct this?

app.directive('dynamic', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function(scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                console.log(ele) //HERE
                ele.html(html);
                $compile(ele.contents())(scope);
            });
        }
    };
})

When I have jQuery, element looks like this:

[div, context: div, jquery: "1.11.0", constructor: function, selector: "", toArray: function…]

Otherwise:

[div, ready: function, toString: function, eq: function, push: function, sort: function…]

(I know it is not the full array, but you can see the difference).

Example without jQuery: http://liveweave.com/05cWsP
Example with jQuery: http://liveweave.com/w6QTpy

haimlit · Accepted Answer · 2014-07-18 10:56:49Z

1

Angular has jqlite, which is a small subset of jQuery. It is used when jQuery isn't loaded on the page or is loaded after angular. Otherwise, angular will use jQuery instead of jqlite (but will still wrap it and add extra methods such as .scope() that jqlite has).

See documentation: https://docs.angularjs.org/api/ng/function/angular.element

So to answer your question, this behavior makes sense.

answered Jul 18, 2014 at 10:56

haimlit

2,6022 gold badges24 silver badges26 bronze badges

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

2 Comments

Clem Over a year ago

Ok I get it, but my problem here is unsuccessful compiling, when I have whole jQuery on page -> $compile(ele.contents())(scope);

haimlit Over a year ago

And it happens only when jquery is enabled? Any chance of a plunker that shows it?

Collectives™ on Stack Overflow

Angularjs and jQuery...function return jquery element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related