JQuery 未在 AngularJS 中初始化

Question

我正在尝试在 AngularJS 中使用 JQuery。

在AngularAPI里面说

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

<!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");
    });

});

我只想根据 WindowWidth 以及调整大小，将 google 地图的宽度设置为 Jquery。有趣的是，Jquery 没有初始化，但如果我调整 window 的大小，它就会突然起作用。重新加载后它就消失了。

我是不是理解错了？为什么 Jquery 仅在触发调整大小功能时才初始化？

Answer 1

这应该有效

移动这条线

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

Answer 2

您的代码中没有错误，Frame 不是全宽的原因是因为您在加载时从未收到调整大小事件：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");
    });

});

JQuery 未在 AngularJS 中初始化

JQuery not initialized in AngularJS

jquery

google-maps

resize

angularjs