需要 angularjs-dragula 包时未加载 angularjs 指令
Posted
技术标签:
【中文标题】需要 angularjs-dragula 包时未加载 angularjs 指令【英文标题】：angularjs directive not being loaded when angularjs-dragula package is required 【发布时间】：2019-10-04 20:28:43 【问题描述】：我正在将我们的 .NET Framework 项目迁移到 .NET Core。以及我们之前依赖 .NET Framework 中的 BundleTable 工具的地方。我们现在正在使用 webpack。
我有一个使用包“angularjs-dragula”的指令。 webpack入口定义如下
'bundles/grouping':
[
"./Scripts/angularjs-dragula.js",
"./App/components/grid.directive.js",
"./App/components/inline-edit.directive.js",
"./App/services/grouping.service.js",
"./App/components/grouping/grouping.directive.js"
],
我将指令初始化如下：
(function ()
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService)
...
事实上，页面永远不会加载 grouping.directive。并且没有错误。除非我删除 webpack 入口点中的 dragula 文件。然后该指令将加载，但抱怨：
ReferenceError: angularDragula 未定义[了解更多]
我曾尝试依赖 webpack 来导入包，并将其从入口定义中删除。我将 angularjs-dragula 安装到我的 node_modules 中，并使用了
var angularDragula = require('angularjs-dragula');
(function ()
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService)
...
但是这会导致相同的行为。
angularjs-dragula 包可以工作，因为我们在迁移到 webpack 之前就使用了它。但是现在它似乎默默地失败了，并带着指令的其余部分？
如何开始诊断此问题？
【问题讨论】：
你怎么知道指令没有加载？ 【参考方案1】：AngularJS wrapper for Dragula 的不同寻常之处在于它在全局范围内放置了一个名为 angularDragula 的函数。当使用angular 作为参数调用该函数时，该函数将dragula 模块注册到AngularJS。它返回一个模块名称为“dragula”的字符串。
angularDragula(angular)
angular.module("app",["dragula"])
.run(function(dragulaService)
console.log(dragulaService);
) <script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angularjs-dragula/dist/angularjs-dragula.js"></script>
<body ng-app="app">
<h1>Hello AngularJS!</h1>
</body>页面从不加载 grouping.directive
如何开始诊断此问题？
我会使用开发者控制台插入断点。然后检查变量。
上面的例子用 Dragula 加载 AngularJS 并成功记录了 dragularService。
【讨论】：
以上是关于需要 angularjs-dragula 包时未加载 angularjs 指令的主要内容，如果未能解决你的问题，请参考以下文章