Question

我需要在我的AngularJS应用程序中使用JQuery。当我以下列方式将它添加到主（Jade）页面时：

script(src="/js/lib/jquery-1.10.2.min.js")
script(src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js")
script $.noConflict();
script(src="/js/lib/angular.min.js")
script(src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js")

我的登录页面不断消失并重新出现（即闪烁）并且jquery-ui元素被一遍又一遍地添加到页面中，因此当使用chrome调试工具时我看到类似的东西（无法发布图像）对不起）：

<script async="" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js?_=1389627589530"></script>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589527"></script>
<script async="" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js?_=1389627589501"></script>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589498"></script>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589069"></script><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589040"></script>

当我从依赖项中删除jQuery时，页面将按预期呈现。我做错了什么？

Answer 1

看来您的Angular应用程序正在尝试加载根文档。包含脚本的所有调用/引用的文档。包含jQuery时出现问题的原因是因为jQuery知道如何处理部分视图中的脚本。 AngularJS本身使用jqLite和一些基本的加载视图，它不加载脚本。使用jQuery，Angular将使用jQuery加载视图。它会看到脚本并尝试加载它们。执行时脚本的一部分告诉它再次获取根文档，从而循环。这就是为什么你看到一遍又一遍地加载相同的脚本。

您只需要整页一次，加载，然后部分。确保您的应用仅加载不包含<head>的部分视图。如果您使用Razor，Jade或其他包含/扩展视图的内容来汇总整页视图，则需要禁用该功能，以便仅为部分调用返回部分内容。

添加JQuery时，AngularJS页面会保持渲染

1 个答案: