2013-12-19 5 views
2

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>

을 사용하고 있습니다. 그리고 아직 작동하지 않습니다. enter image description here

태그 안에 가져온 처음 3 개의 스크립트 중 3 개가 제거되었습니다. 그래서 나는 다음과 같은 이미지를 얻는다. 최상위 메뉴가 작동 중입니다. 하지만 왼쪽 메뉴는 콘솔에서 JQuery 오류를 최소화하고 표시 할 수 없습니다. 잡히지 않은 ReferenceError : jQuery가 정의되지 않았습니다..

enter image description here

나는이 문제를 어떻게 해결할 수 있습니까?

+0

이상 당신은 당신의 코드에서 =보기 = ""겨있다. 그것은 ng-view이어야합니다 –

답변

1

게시 한 HTML을 보면 IE 이외의 브라우저에서 조건부 주석을 사용하려고 한 것처럼 보입니다. 이 외에도 주석을 닫을 때 브라우저에서 jQuery를로드하는 데 영향을 미치지 않아야합니다.

또 다른 가능한 이유는 잘못된 경로를 사용하여 jquery를로드하는 것입니다. styles/assets/js/jquery-2.0.3.min.jsbower_components/jquery/jquery.js을 참조하십시오. 올바른 경로를 확인하고 맨 위로 이동해야합니다.

+0

'bower_components/jquery/jquery.js'를 먼저 추가하고'styles/assets/js/jquery-2.0.3.min.js'를 제거했습니다. 하지만 여전히 작동하지 않습니다. –

+0

'bower_components/bootstrap-sass/js' 안에있는 모든 JS를 지우려고했습니다. 그리고 그것은 효과적입니다. 하지만 콘솔에 몇 가지 오류가 표시됩니다. 그러나 문제는 앞으로 이러한 스크립트를 사용해야 할 수도 있습니다. –

+0

bootstrap-sass js 구성 요소를 제거하지 않고 페이지 상단에''을 입력하여 작동하는지 확인하십시오 –

관련 문제