9

我在我的新服务中使用了 angularjs、下划线和 jQuery： 

myModule.factory('MyService', ['MyResource', function (MyResource) {
     ....
    // Here I make use of _ and $
}]);

如何将下划线或 jQuery 注入新服务，以便确定 _ 是下划线而 $ 是 jquery？

我正在寻找类似的东西：

myModule.factory('MyService', [ 'underscore', 'jquery','MyResource', function (_, $, MyResource) {
     ....
    // Here I want to use $ and _ and be SURE that _ is underscore and $ is jquery
}]);
4

2 回答 2

22

基于@moderndegree 的方法，我已经实现了以下代码，我不能说它是完美的，但是这样测试人员会知道它是否具有 jQuery 依赖项，因为它$window是太通用的对象而无法注入。

'use strict';
(function () {
    var app= angular.module('app');
    //these are just references the instance of related lib so we can inject them to the controllers/services in an angular way.
    app.factory('jQuery', [
        '$window',
        function ($window) {
            return $window.jQuery;
        }
    ]);

    app.factory('Modernizr', [
        '$window',
        function ($window) {
            return $window.Modernizr;
        }
    ]);

    app.factory('Highcharts', [
    '$window',
    function ($window) {
        return $window.Highcharts;
    }
    ]);

})();
于 2014-09-17T10:09:38.640 回答
4

如果您在 HTML 中包含 jQuery 和 Underscore，它们将在全球范围内可用。没有必要“注入”它们。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//documentcloud.github.io/underscore/underscore-min.js"></script>

如果您想将它们包含在一个模块中，您可以执行以下操作：

angular.module('myApp', []).
service('vendorService', ['$q', '$timeout', '$window', function($q, $timeout, $window){
    var deferred = $q.defer(), libs = {};
    $script([
        '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',
        '//documentcloud.github.io/underscore/underscore-min.js'
    ], 'vendorBundle');
    $script.ready('vendorBundle', function() {
        libs.$ = $window.jQuery.noConflict();
        libs._ = $window._.noConflict();
        $timeout(function(){
            deferred.resolve(libs);
        }, 0);
    });
    this.getLibs = function(){
        return deferred.promise;
    }
}]).
controller('myController', ['$scope', 'vendorService', function($scope, vendorService){
    vendorService.getLibs().then(function(libs){
        $scope.jQueryVersion = libs.$.fn.jquery;
        $scope._ = libs._;
    });
}]);

这样做将允许您异步加载库，同时防止它们与以前加载的版本冲突。可能有更好的方法来存储对已加载库的引用，但这应该可以正常工作。

此外，此示例依赖于第三方 laoder ( $script.js )。

这是一个 jsFiddle ( http://jsfiddle.net/moderndegree/bzXGx/ );

于 2013-07-01T16:15:39.167 回答