Question

我正在使用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路由而中断，所以我从中删除了＃。它仍然无法正常工作。 enter image description here

我删除了在标记内导入的3个前3个脚本。所以我得到了如下图像。顶级菜单正在运作。但左侧菜单无法在控制台中最小化并显示JQuery错误未捕获的ReferenceError：未定义jQuery 。

enter image description here

我该如何解决这个问题？

Answer 1

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

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

Answer 2

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

wrapbootstrap jquery不使用angularjs

2 个答案: