angularjs和jquery冲突导致chrome停止响应

Posted 2023-05-09

【中文标题】angularjs和jquery冲突导致chrome停止响应

【英文标题】：angularjs and jquery conflict cause chrome stop responsing

【发布时间】：2018-02-22 20:55:24

【问题描述】：

<div class="gridly-static">
  <div id=y.id ng-repeat="y in Categories" ng-init="initCategories()">
    <div class="title">y.name</div>
  </div>
</div>

Categories 变量是通过 $http.get() 从 api 服务获取的，ng-init 调用 initCategories 是使用 jquery-gridly 动态重置布局。两件事的结合使我的 chrome 停止响应（选项卡也可以'根本不关闭）

当我将类别更改为对象（不要从互联网获取）时，代码可以找到。另外，当我不使用 $('xxx').gridly() 初始化布局时，它也可以工作。

我知道结合 angularjs 和 jquery 是个坏主意。但是，为什么代码使 chrome 停止运行让我感到困惑。（循环？由 angular watch 引起的？）

【问题讨论】：

你试过用 jQuery ('# idElement') 代替 $ ...吗？

网址api.jquery.com/jquery.noconflict中的示例

【参考方案1】：

许多 javascript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 的例子中，$ 只是 jQuery 的别名，所以所有功能都可以在不使用 $ 的情况下使用。如果您需要与 jQuery 一起使用另一个 JavaScript 库，请通过调用 $.noConflict() 将 $ 的控制权返回给另一个库。 $ 的旧引用在 jQuery 初始化期间被保存； noConflict() 只是恢复它们。

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) 
// Code that uses jQuery's $ can follow here.
);
 // Code that uses other library's $ can follow here.
</script>

更多详情Documentation