将 jQuery 依赖项传递给 Angular js 控制器答案

【问题标题】：Pass jQuery dependency to angular js controller将 jQuery 依赖项传递给 Angular js 控制器
【发布时间】：2016-03-27 22:53:08
【问题描述】：

我正在使用 angularjs 1.4，并且在我的一个 angular 控制器中我必须使用 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
    }]);
})();

能否请一些人指导我做错了什么。

【问题讨论】：

标签： javascript jquery angularjs dependency-injection

【解决方案1】：

如果您在 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”或 jqLite。

有关详细信息，请参阅AngularJS angular.element API Reference。

【讨论】：

【解决方案2】：

您可以在应用程序模块中创建自己的常量，然后您可以在任何需要的地方注入该依赖项。

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。

【讨论】：