Question

我试图在Angular单页面应用程序中的php页面上弹出一个javascript模式窗口。此页面在初始index.html之后加载。 html标签写为：

<html ng-app="myApp" class="ng-scope">

...并且加载的页面内容存储在：

中

<div ng-view="" class="ng-scope">

在特定的php页面中有javascript会抛出错误。这是完整的php页面，包括底部的javascript：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="myModal" class="modal">

    <!-- Modal content -->
        <div class="modal-content">
        <span class="close">&times;</span>
        <img id="popup_img" src="#">
         </div>

    </div>
    <div id="screenings">
        <?php
            $db = mysqli_connect("localhost", "root", "", "database");
            $sql = "SELECT * FROM screenings";
            $result = mysqli_query($db, $sql);
            while ($row = mysqli_fetch_array($result)){
                echo "<div id='img_div' onClick='btn()'>";
                    echo "<img id='img_screenings' class='modal_img' src='images/".$row['image']."' >";;
                    echo "<p id='screenings_p' align='center'>" .$row['venue']."</p>";
                    echo "<p id='location_p' align='center'>" .$row['location']."</p>";
                    echo "<p id='date_p' align='center'>".date('F j, Y',strtotime($row['date']))."</p>";
                echo "</div>";
            }
        ?>
    </div>
<script>

$document.ready(function(){
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
//var btn = document.getElementsByClassName("modal_img");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

$("img").on("click", function() {
var source = ( $(this).attr("src") );
//alert(source);
//$('#modal_popup').text(source);
$('#popup_img').prop('src', this.src);
});

// When the user clicks the button, open the modal 
function btn() {
modal.style.display = "block";
}


// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
})
</script>
</body>

具体来说，我在Chrome控制台中收到此错误：＆＃34;未捕获的ReferenceError：btn未定义在HTMLDivElement.onclick＆＃34;

Angular单页应用程序中的Javascript函数无效

0 个答案: