Pass jQuery dependency to angular js controller

Question

I am using angularjs 1.4, and in one of my angular controller I have to use jQuery. but when I am trying to pass it as dependency, it is not working.

I tried below code, but no success

(function () {
    'use strict';

    var app= angular.module('app');

    app.controller('getUserInfo', ['jQuery',
        function($) {
         // some logic
    }]);
})();

I also tried below code, but no success

(function () {
    'use strict';

    var app= angular.module('app');

    app.controller('getUserInfo', ['$',
        function($) {
         // some logic
    }]);
})();

Can some please guide what I am doing wrong.

Pankaj Parkar · Accepted Answer · 2015-12-21 19:35:45Z

9

You could create your own constant inside your app module & then you can inject that dependency where ever you want.

app.constant('jQuery', window.jQuery)

I chosen constant, because It would be available to inject its dependency inside config phase of angular.

(function () {
    'use strict';

    var app= angular.module('app');

    app.controller('getUserInfo', ['jQuery',
        function($) {
         // $ will provide you all jQuery method available in it.
         //but don't do DOM manipulation from controller.
         //controller is not the correct place to play with DOM.
    }]);
})();

But as you wanted to inject dependency of jQuery inside a controller, I'd say NO. Don't do that. Basically you shouldn't do any DOM manipulation from the controller. You can do that from the directive, which has capability to playing in better way with DOM.

edited Dec 21, 2015 at 19:35

answered Dec 21, 2015 at 19:29

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

georgeawg · Accepted Answer · 2015-12-21 19:42:16Z

6

If you load jQuery.js before angular.js, AngularJS will make it available as angular.element and add Angular specific methods as well.

app.controller('getUserInfo', function() {
     var $ = angular.element;
     // some logic
}]);

From the Docs:

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.

For more information see the AngularJS angular.element API Reference.

answered Dec 21, 2015 at 19:42

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Pass jQuery dependency to angular js controller

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related