wrapbootstrap theme - ace을 사용하고 있습니다.wrapbootstrap jquery가 angularjs와 작동하지 않습니다.
yeoman, karma 및 grunt를 사용하여 angularjs를 사용하는 html 페이지가 있습니다. 거기 에이스 테마를 사용하고 있습니다. 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 -->
나는 다음과 같은 이미지처럼 얻을. 왼쪽 메뉴는 최소화 할 수 있습니다. 그러나 오른쪽 상단 메뉴 알림 및 프로필 드롭 다운이 작동하지 않습니다. 그 드롭 다운 내가 그래서이 # 것과을 제거 HREF = #이 라우팅 AngularJS와에 의해 방해 때문입니다 생각 <a href="#">Welcome</a>
을 사용하고 있습니다. 그리고 아직 작동하지 않습니다.
태그 안에 가져온 처음 3 개의 스크립트 중 3 개가 제거되었습니다. 그래서 나는 다음과 같은 이미지를 얻는다. 최상위 메뉴가 작동 중입니다. 하지만 왼쪽 메뉴는 콘솔에서 JQuery 오류를 최소화하고 표시 할 수 없습니다. 잡히지 않은 ReferenceError : jQuery가 정의되지 않았습니다..
나는이 문제를 어떻게 해결할 수 있습니까?
이상 당신은 당신의 코드에서 =보기 = ""겨있다. 그것은 ng-view이어야합니다 –