将jQuery依赖关系传递给angular js控制器

Question

我正在使用angularjs 1.4,在我的一个角度控制器中,我必须使用jQuery.但是当我试图将它作为依赖项传递时,它无效.

我试过下面的代码,但没有成功

(function () {
    'use strict';

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

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

我也试过下面的代码,但没有成功

(function () {
    'use strict';

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

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

有些人可以指导我做错了什么.

Answer 1

您可以在应用程序模块中创建自己的常量,然后可以根据需要注入该依赖项.

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

我选择了常量,因为它可以在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.
    }]);
})();

但是当你想在控制器中注入jQuery的依赖时,我会说不.不要那样做.基本上你不应该从控制器做任何DOM操作.你可以从指令中做到这一点,它有能力以更好的方式使用DOM.

Answer 2

如果您在 angular.js 之前加载 jQuery.js，AngularJS 将使其可用angular.element并添加特定于 Angular 的方法。

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

从文档：

如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，angular.element 将委托给 Angular 的内置 jQuery 子集，称为“jQuery lite”或 jqLit​​e。

有关更多信息，请参阅AngularJS angular.element API 参考。