我正在使用wrapbootstrap theme - ace .
我有一个 html 页面，使用 使用 yeoman、karma 和 grunt 的 angularjs。我在那里使用 ace 主题。 AngularJS 对我来说工作得很好。但wrapbootstrap主题无法正常工作。有些 Jquery 可以工作，但有些则不行。这是我的 index.html 页面结构。
<html>
<head>
<!-- CSS imports -->
</head>
<body ng-app="MyApp">
<div class="navbar">
<!-- Page top header and left side menus -->
<div ng=view="">
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='styles/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!-- [if IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='styles/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif] -->
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='styles/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="styles/assets/js/bootstrap.min.js"></script>
<script src="styles/assets/js/typeahead-bs2.min.js"></script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="styles/assets/js/ace-elements.min.js"></script>
<script src="styles/assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/invoiceUpload.js"></script>
<!-- endbuild -->
我得到的像下面的图片。左侧菜单可以最小化。但右上角的菜单通知和个人资料下拉菜单不起作用。这些下拉菜单使用 <a href="#">Welcome</a>
我认为这是因为 href=# 被 angularjs 路由 中断，所以我从中删除了 # 。但它仍然不起作用。
我删除了 标记内导入的前 3 个脚本。所以我得到如下图所示。顶部菜单正在工作。但左侧菜单无法最小化并在控制台中显示 JQuery 错误 Uncaught ReferenceError: jQuery is not Defined。
我该如何解决这个问题？
最佳答案
查看您发布的 html，看起来您尝试在非 IE 浏览器中使用条件注释。除此之外，由于您关闭了注释，因此不应影响浏览器加载 jQuery。
另一个可能的原因是您使用了错误的路径来加载jquery:我看到styles/assets/js/jquery-2.0.3.min.js和bower_components/jquery/jquery.js 也许您应该检查哪一个是正确的并移至顶部。
关于jquery - wrapbootstrap jquery 不能与 angularjs 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20674382/