Question

在我的角度应用程序中，我使用了angular-dragdrop module等模块，结果发现这个模块与jquery的版本不兼容，因为它使用了（v3.1.1）被用来使用angular的本机库jqlite（但也许它可以使用低于v3.0.0的版本）。现在我正在考虑使用jQuery.noConflict（）在应用程序中提供两个版本，但我不想嵌入我已经拥有的jquery版本并找到一种方法来使用已经有的现有的jqlite库，但我不知道它是否可以以这种方式使用以及如何使用。谢谢你的帮助。

************ 编辑以获得答案 **************

这是the plunker的阻力＆amp; estus 要求我使用 ng-jq 指令显示失败的下拉模块（此plunker与其官方文档中example相同但是我没有添加jquery在角度之前加载但我也尝试重现我自己的应用程序上下文所以我还添加了 jquery-ui 和 bootstrap 显示当我用 e.originalEvent.dataTransfer 替换拖动模块文件（ draganddrop.js ）中的每个 e.dataTransfer 时出现的另一个失败这个修复工作在这个例子中但不适用于我自己的应用程序（我也想知道为什么，在我的应用程序中， dataTransfer 既没有在事件e中也没有在中e.originalEvent ，如此日志捕获所示：

由拖拉机作者提出的原始修正案。 drop模块本身正在将 dataTransfer 属性添加到 jQuery.event.props 但是props was removed from jquery since its v3.0.0这是拖拽和放置的实际原因。 drop module与v3.0.0以上的jquery版本不兼容。原始修复位于（ draganddrop.js ）的第14行，其中包含以下if测试：

if (window.jQuery && !window.jQuery.event.props.dataTransfer) {
   window.jQuery.event.props.push('dataTransfer');
}

您可以注意到，当在plunker示例中评论jquery scrpit / links时，拖动＆amp; drop完美无缺：

<!-- <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link data-require="jquery-ui@1.11.2" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="jquery-ui@1.11.2" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>-->

为了仅测试 ng-jq 指令，我将假设没有修复（我正在谈论使用 originalEvent 修复这里，而不是作者所做的原始修复）暂时只让 ng-jq 通过在 ui-draggable draggable中使角色使用jqlite而不是jquery来解决问题strong>哪个是被拖动的元素，而＆＃34; ui-onDrop＆＃34; 应该发生丢弃，并且我添加了 ng-jq 指令但这并没有使角色使用jqlite。

我想也许如果曾经有一个角度已经采用了jquery而不是jqlite，那么它就不会在特定的指令案例中使用后者，就像我正在尝试使用拖拽和放大器一样。上面提到的drop指令但是在进行一些测试时似乎 bindJQuery（）函数使angular.js中的任务（影响jquery或jqlite到angular.element）运行不止一次，所以也许可能每个指令都可以选择运行哪一个）

Answer 1

jQuery.noConflict() affects window.$并且此处不执行任何操作。

如果在加载Angular时存在angular.element，

window.jQuery将被强制使用jQuery。如果在angular.js

之前加载jquery.js，则可以避免这种情况

或者，ng-jq属性（不是真正的指令，如文档所述）可用于修改此行为：

使用此指令强制angular.element库。这应该用于通过将ng-jq留空或在窗口下设置jquery变量的名称来强制jqLite（例如jQuery）。

根据the example，

此示例显示如何使用ngJq指令强制jqLite到html标记。

<!doctype html>
<html ng-app ng-jq>
...
...
</html>

如何使用jqLite和jQuery.noConflict（）使它与jquery

1 个答案:

如何使用jqLit​​e和jQuery.noConflict（）使它与jquery

1 个答案:

如何使用jqLite和jQuery.noConflict（）使它与jquery