javascript - Pass jQuery dependency to angular js controller - Stack Overflow

admin管理员组

文章数量:1242825

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.

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.

• javascript
• jquery
• angularjs
• dependency-injection

Share Improve this question Follow edited Dec 22, 2015 at 15:44 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Dec 21, 2015 at 19:24 Avinash JainAvinash Jain 7,61622 gold badges2828 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： javascriptPass jQuery dependency to angular js controllerStack Overflow