题 使用没有RequireJS的角度Dragula


我希望使用angular-dragula模块在我的Angular项目中实现Drag and Drop(https://github.com/bevacqua/angular-dragula)。但是,它似乎严重依赖于RequireJS。我没有使用Require一段时间,只有一个示例app或两个。有没有一种简单的方法来解开这个模块的需求?

作者似乎认为它很简单(https://github.com/bevacqua/angular-dragula/issues/23并且在没有真正解释的情况下也关闭了类似的问题。我查看了代码,但没有看到如何加载模块而没有将RequireJS添加到我的项目中(我不想这样做)。我是否坚持使用不使用此模块或添加Require或是否有办法在没有要求的情况下使用此模块?


11
2017-11-16 20:57


起源


浏览源代码看起来像 dist/angular-dragula.js 取决于要求,但缩小版本可能不会。您是否尝试使用缩小版本来查看它是否有效? - yvesmancera
是的,我做了,但它似乎没有用。问题的一部分是它也希望通过传入角度来初始化,所以我很难将它包含在角度中作为依赖。 - IAmTimCorey
我想你可以传递一个全局变量的实例 angular 从那以后 require('angular') 反正会回来的。 - yvesmancera
尝试 AMD清洁。如果有效,请告诉我们。 - georgeawg
我在下面发布了我的答案。如果按正确顺序加载所有内容并使用作者创建的变量名称,我们可以绕过require。至于AMD清洁,我没有达到尝试的目的。感谢大家的帮助。 - IAmTimCorey


答案:


好的,经过评论的人的帮助(谢谢大家!),我能够让这个工作。您需要做几件事。首先,我将此模块与其余模块捆绑在一起并尝试调用它。这不起作用,因为它需要用参数初始化(angular)。因此,您需要执行以下操作:

  1. 将angular-dragula.js(或最小版本)的引用添加到index.html页面下面的angular声明,但在您创建应用程序的位置上方。
  2. 声明应用程序的依赖项时,请指定 angularDragula(angular) (不在引号中)。
  3. 像往常一样使用dragula。如果您需要访问该服务,名称将是 angularDragula

例如,这是我的app声明:

var app = angular.module('app', [
  'ngRoute',
  angularDragula(angular)
]);

然后得到一个简单的列表,可以拖放,这是我的HTML:

<div dragula='"bag-one"' dragula-model="vm.items">
    <div ng-repeat="item in vm.items">{{ item }}</div>
</div>

请注意,与示例不同,我没有在任何地方声明angularDragula。在作者给出的例子中,他要求 angular 并创造了 angular 变量然后他需要 angular-dragula 并创造了 angularDragula 变量。如果您不使用,则不需要这样做 RequireJS 只要您按正确的顺序加载脚本。


22
2017-11-17 14:48



我在我的离子应用程序中尝试这个。我没有在index.html中明确加载角度,离子处理它。这会改变我的做法吗?按照你的描述做 angularDragula 回报 function register(angular) {...但称其为错误 cannot read property 'module' of undefined 在 var app = angular.module('dragula', ['ng']); - Brad W
我正在加载 dist/angular-dragula.js 在离子之后但在我之前 app.js 并宣布 angularDragula(angular) 在我的 app.js 依赖关系(我已尝试在离子依赖关系加载之前和之后都没有区别)。 - Brad W
没关系它工作正常。我没有将正确的依赖项传递给我的控制器(dragulaService)。谢谢你的解决方案! - Brad W
是的,它的工作原理!但现在我的所有测试都失败了:错误:ReferenceError:找不到变量:angularDragula - bokkie