Question

我正在尝试使用自定义jquery插件，以便在带有Webpack的指令元素上使用。我开始按照我预期的方式实施。

// example.directive.js

var customJQPlugin = require('./customJQPlugin.plugin');

...

  link: function (scope, elem) {
    angular.element(elem).customJQPlugin({
      some: 'options'
    });
  }

...

这会将插件应用于元素。

然后是插件文件（与指令在同一目录中）

// customJQPlugin.plugin.js

(function ($) {

  $.fn.customJQPlugin = function (options) {
    var el = this;
    ...
  }

})(jQuery)

我的问题是，执行此操作的典型方法是什么，我目前有一些错误，this未定义，customJQPlugin is not a function链接到angular.element(elem).customJQPlugin(options)

这更多是关于如何以Webpack可以require的方式构造jQuery插件文件，以便应用于angular指令。我确信不需要IIFE，但我不确定如何重构Webpack。

编辑： asume jQuery和$全球可用

Answer 1

我找到了让它运转的方法，但我不确定它是否是最佳方式。

// customJQPlugin.plugin.js

module.exports = function (options) { ... }

然后在我的指令文件中，我可以执行以下操作：

$.fn.customJQPlugin = require('./customJQPlugin.plugin');

...

link: function() {
  $(elem).customJQPlugin({
    some: 'options'
  });
}

....

我仍然有一些错误，但这看起来更可能与问题无关。

这不是最干净但它确实有效，如果我发现更多，它会更新。

使用Webpack的Angular Directive自定义jQuery插件

1 个答案: