Question

我正在使用node，gulp和browserify来使我的JS文件正确顺序并管理模块。我将jQuery和AngularJS安装为节点模块，并在需要时需要它们。 Angular默认使用jqLite来处理DOM-Elements。

我知道当jQuery在AngularJS之前加载时，Angular将使用jQuery而不是jqLite。

但是如何在使用browserify时让Angular使用jQuery。或者：如何让jQuery成为角色？

现在我正在做var $ = require("jquery");并在需要时使用它。但是我希望有一个Angular，例如：

时会原生地给我jQuery方法

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var a = $elem.width();//jQuery methods currently not available here
        }
    };
});

我真正需要做的事情：

var jQuery = require("jquery");

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var jqElement = jQuery($elem);
            var a = $jqElement.width();//jQuery methods are available here
        }
    };
});

Answer 1

您可以使用browserify-shim

npm install browserify-shim --save-dev

的package.json

"browserify": {
  "transform": ["browserify-shim"]
},
"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
  "jquery": "$",
  "angular": {
    "exports": "angular",
    "depends": ["jquery"]
  }
}

Answer 2

对于AngualrJS 1.x，请使用值提供程序

var jQuery = require('jQuery');
var app = require('../app');

app.value('jQuery', jQuery);

然后在你需要它的指令或组件中（你不应该需要jQuery）：

var app = require('../app');

foo.$inject = ['jQuery'];
function foo(jQuery) {
    return {
        restrict: 'A',
        scope: true,
        link: function(element, scope, attr) {

             // I can use jQuery here
             // though I am unsure why
             // I would want to. 

        }
    }
}

app.directive('foo', foo);

现在，如果您需要为此指令编写单元测试，则可以根据需要为jQuery注入存根。

Answer 3

对于angularjs这对我有用。

var jQuery = require('jQuery');
var angular = require("angular");

Answer 4

未经测试但它应该有效，因为AngularJS在angular.element中存储了jQlite：

angular.element = require("jquery");

如何在使用browserify时在AngularJS中包含jQuery？

4 个答案: