將jQuery名稱空間注入AngularJS

Question

我在這里有點麻煩。

我正在使用RequireJS加載我的模塊和依賴項。 我試圖避免污染全局名稱空間，因此我以以下配置為起點，以避免在全局窗口對象中定義$或jQuery ：

require.config({
    map: {
       '*': { 'jquery': 'jquery-no-conflict' },
       'jquery-no-conflict': { 'jquery': 'jquery' }
    },
    shim: {
       'jquery': { exports: 'jQuery' },
       'angular': { exports: 'angular', deps: ['jquery'] }
       // ...
    }
});

模塊jquery-no-conflict看起來像這樣：

define('jquery-no-conflict', ['jquery'], function (jQuery) {
    return jQuery.noConflict(true);
});

這顯然解決了問題，但是存在問題。

我不知道有沒有jQuery加載與未加載的AngularJS行為，顯然，這是通過檢查全局名稱空間來完成的。

例如，如果未找到或未加載jQuery，則AngularJS $window將是本機元素window的包裝，但是如果定義了jQuery，它將是jQuery的$(window)的包裝。

對於我網站上的某些功能，我需要后者，但是通過這種配置，我可以使用前者（因為AngularJS似乎找不到jQuery）；

有什么方法可以將我的jQuery模塊/變量注入AngularJS並使其不檢查全局名稱空間嗎？

如您所見，我的jquery模塊正在導出，因此RequireJS在請求它時會給我一個作用域變量。

如果這不可能，那么在我的情況下您會怎么做？ 要解決此問題可以采取什么措施？

Answer 1

如果常規jQuery全局變量引起問題，則可以使用ng-jq attrubute為jQuery提供自定義window屬性。

截至今天，Angular仍然依賴於全局變量， jQuery也不例外 。

Answer 2

jQuery加載后，您可以從requirejs手動引導應用程序，並將其提供給服務。

requirejs(['jquery'], function (jQuery) {
    angular.module('HelloApp').
    service('jQuery', function () {
        return jQuery.noConflict();
    });
    angular.bootstrap(document, ['HelloApp']);
});

請注意，您不會在html標記中包含ng-app

 requirejs.config({ "baseUrl": "js/lib", "paths": { "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min", } }); angular.module('HelloApp', []). controller('HelloController', [function (jQuery) { var HelloController = this; HelloController.greet = function () { return "Hello from HelloController!"; } }]). directive('anoyatron', ['jQuery',function (jQuery) { return { restrict: 'A', link: function (scope, element) { function anoyatron(){ jQuery(element).slideUp(function(){jQuery(element).slideDown(anoyatron);}); } anoyatron(); } }; }]); requirejs(['jquery'], function (jQuery) { angular.module('HelloApp'). service('jQuery', function () { return jQuery.noConflict(); }); angular.bootstrap(document, ['HelloApp']); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script> <div ng-controller="HelloController as HelloController"> <p>{{HelloController.greet()}}</p> </div> <div anoyatron>lorem ipsum</div>