wrapbootstrap jquery 不适用于 angularjs答案

【问题标题】：wrapbootstrap jquery not working with angularjswrapbootstrap jquery 不适用于 angularjs
【发布时间】：2014-01-07 14:09:16
【问题描述】：

我正在使用wrapbootstrap theme - ace。

我有一个使用 angularjs 使用 yeoman、karma 和 grunt 的 html 页面。我正在使用 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 个脚本。所以我得到如下图。顶部菜单正在工作。但是左侧菜单无法最小化并在控制台中显示 Uncaught ReferenceError: jQuery is not defined 的 JQuery 错误。

我该如何解决这个问题？

【问题讨论】：

您的代码中有 ng=view=""。应该是ng-view

标签： jquery html angularjs twitter-bootstrap

【解决方案1】：

Angular 目前不支持 jQuery 2.x 或更高版本 https://docs.angularjs.org/misc/faq

【讨论】：

【解决方案2】：

查看您发布的 html 看起来您尝试在非 IE 浏览器中使用条件 cmets。除此之外，由于您关闭了评论，不应该影响浏览器加载 jQuery。

另一个可能的原因是您使用了错误的路径来加载 jquery：我看到 styles/assets/js/jquery-2.0.3.min.js 和 bower_components/jquery/jquery.js 也许您应该检查哪个是正确的并移到顶部。

【讨论】：

我尝试先添加bower_components/jquery/jquery.js，然后删除styles/assets/js/jquery-2.0.3.min.js。但它仍然无法正常工作。
我尝试删除 bower_components/bootstrap-sass/js 中的所有 JS。它正在工作。但在控制台中显示一些错误。但问题是将来我可能需要使用这些脚本。
不去掉bootstrap-sass js组件，直接把<script src="bower_components/jquery/jquery.js"></script>放在页面顶部，看看能不能用
我尝试将其作为第一个脚本导入。结果还是一样
如果您的问题得到解决，请说明问题所在？