JQuery가 AngularJS에서 초기화되지 않았습니다.

AngularJS에서 JQuery를 사용하려고합니다. 그것이 각 API에서JQuery가 AngularJS에서 초기화되지 않았습니다.

는 응용 프로그램이 부트 스트랩 될 때 앱에 존재하는 인 경우 각도가 jQuery를 사용할 수

예
말했다. 스크립트 경로에 jQuery가 없으면 Angular는 jQLite라고하는 jQuery의 하위 집합 자체 구현으로 돌아갑니다.

<!DOCTYPE html> 
<html lang="en" ng-app="App"> 
<head> 
    <title>INDEX</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

</head> 

<body> 

<section> 
    <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2659.8246953659373!2d16.39510611537435!3d48.190729055436904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d075e036ac393%3A0xa397f7b3829b7b3a!2sRennweg+89B%2C+1030+Wien!5e0!3m2!1sde!2sat!4v1477220288357" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
</section> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/script.js"></script> <!-- Jquery Code --> 
</body> 
</html>

내 JQuery와 스크립트에서 이것을 사용하고 있습니다 : 난 그냥 JQuery와 또한 크기 조정에서 WindowWidth에 따라와 구글 맵의 폭을 설정할

$(document).ready(function() { 

    function setWidth() { 
     var windowWidth = $(window).width(); 
     $('.map').css('width', windowWidth); 
    }; 

    $(window).resize(function() { 
     setWidth(); 
     console.log("Resize"); 
    }); 

});

. 재미있는 사실은 Jquery가 초기화되지 않았지만 내 창 크기를 조정하면 갑자기 작동한다는 것입니다. 다시로드 한 후에 사라졌습니다.

여기에 잘못된 것이 있습니까? Jquery가 크기 조정 기능을 트리거 할 때만 초기화되는 이유는 무엇입니까?

출처

2016-12-24 combi35

초기화에 의해 당신이 무엇을 의미합니까? Jquery 코드는 윈도우 크기를 조정할 때만 호출됩니다. 코드에 오류가 있습니까? – DZDomi

jquery가 문서에로드 된 것을 의미합니다. 아쉽게도 오류가 없습니다. @DZDomi – combi35

코드에서 오류가 없습니다 있어야한다

이동이 줄을 작동합니다 왜 프레임 working Plunker

하지만 강력하게 angular.element()이 $() index.html을

와 동일한 기능이 있는지 확인하기 위해 상단 종속성으로 jQuery를로드하는 제안 : 당신이 결코로드에 resize 이벤트를 얻을 수 없기 때문에하지 전체 폭이다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/script.js"></script> <!-- Jquery Code -->

script.js

$(document).ready(function() { 

    function setWidth() { 
     var windowWidth = $(window).width(); 
     $('.map').css('width', windowWidth); 
    }; 
    //call it on load 
    setWidth(); 
    $(window).resize(function() { 
     setWidth(); 
     console.log("Resize"); 
    }); 

});

출처

2016-12-24 11:07:55 42tg

오오 그렇습니다, 나는로드에서 함수를 호출하는 것을 잊었습니다 ... 그렇습니다. 그렇지만 라우팅을 위해 ng-view를 사용하여 프로젝트를 다시 buildung한다면 같은 문제가 있습니다. 나는 방금 내 문제를 보여줄 기수를 만들었다. 다시 jquery 함수의 크기가 조정되면 [Plunkr] (http://plnkr.co/edit/xN2xP1VlwGNJBcMTWgyK?p=preview) @Bhuneshwer – combi35

예, 경로 html에 대한 onload 이벤트가 없습니다. 그러나 if 윈도우의 너비를 iframe의 너비에만 맞추고 싶다면 왜 CSS를 통해 width : 100 %로 설정하지 않았습니까? [plunkr] (http://plnkr.co/edit/h8Jw76QIhaXsrMqc5BqP?p=preview) – 42tg

또는 만약 당신이 _really_ 자바 스크립트로 이것을하고 싶다면 다음과 같이하십시오 : [plunker] (http://plnkr.co/edit/ X8vq2SbTdtcdCFewF1OD? p = 미리보기) (각도 방식). 행복한 X-mas. – 42tg

이

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

위에

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

그래서 당신의 순서가

<!-- First JQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<!-- AngularJS --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

출처

2016-12-24 11:02:21 Bhuneshwer

JQuery가 AngularJS에서 초기화되지 않았습니다.

답변

관련 문제