的JQuery在AngularJS

我想在AngularJS使用jQuery未初始化。的JQuery在AngularJS

在角API據說

是的，角度可以使用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腳本使用此：

$(document).ready(function() { 

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

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

});

我只是想設置的谷歌地圖使用jQuery取決於WINDOWWIDTH，還對調整的寬度。有趣的事實是，jquery沒有初始化，但如果我調整我的窗口，它突然起作用。重新加載後，它消失了。

難道我明白了什麼在這裏？爲什麼只有在觸發調整大小函數時才初始化Jquery？

來源

2016-12-24 combi35

你是什麼意思的初始化？只有在調整窗口大小時纔會調用Jquery代碼，代碼中是否存在任何錯誤？ – DZDomi

我的意思是jquery加載到文檔中，不幸的是沒有錯誤。 @DZDomi – combi35

。在你的代碼中沒有錯誤Frame的原因是不是全寬是因爲你從來沒有得到上裝載resize事件：working Plunker

但我強烈建議加載jQuery的作爲頂級的依賴，以確保您的angular.element()具有相同的功能$() 的index.html

<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

哦，是的，我忘了打電話給負載的功能...所以是的，它的工作原理，但如果buildung我的項目回來NG-查看路由我有同樣的問題。我只是做了一個plunkr來展示我的問題。再次，如果我調整窗口的jquery功能被觸發[Plunkr]（http://plnkr.co/edit/xN2xP1VlwGNJBcMTWgyK?p=preview）@Bhuneshwer – combi35

耶存在用於路線HTML沒有onload事件。但即時通訊想知道如果你想將iframe的寬度僅設置爲窗口寬度，爲什麼不通過CSS設置寬度：100％？ [plunkr（http://plnkr.co/edit/h8Jw76QIhaXsrMqc5BqP?p=preview） – 42tg

或者當你確實想這樣做的JavaScript做這種方式：[plunker]（http://plnkr.co/edit/ X8vq2SbTdtcdCFewF1OD？p =預覽）（角度方式）。聖誕快樂。 – 42tg

這應該工作

移動此行

<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>

頂部，這樣你的順序應該是

<!-- 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

回答

相關問題