Angular.js modal window within php echoes not working

Question

I'm using code from this angular.js modal window tutorial by Jason Watmore: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

I'm trying to implement an angular.js modal window within a php partial. Here is the code where I believe there's a problem:

<div id="screenings">
    <?php

        //MySQL database connection established

        ...

        while ($row = mysqli_fetch_array($result)){
            echo "<div class='img_div'>";
                echo "<img class='modal_img img_screenings' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";

                ...

            echo "</div>";
        }
    ?>
 </div>

 <modal id="custom-modal-1">
     <div class="modal">
        <div class="modal-body">
                <img id="popup_img" src="#">
        </div>
     </div>
     <div class="modal-background"></div>
</modal>

<script>
    $('.img_div').on("click", function() {
        var source = ( $('.modal_img').attr("src") );
        alert(source);
        $('#popup_img').prop('src', this.src);
    });
</script>

The First Problem

The while loop spits out a bunch of images. The script at the bottom should then grab the src of whichever image is clicked and then alert that src in a pop-up message. However, it only alerts the src of the first image in the while loop regardless of which image of the bunch is clicked. I've tested this script outside of the while loop on separate img elements with different src attributes, and it works fine outside of the echoed while loop.

The Second Problem

Within the while loop, there is an ng-click in the second echoed statement that just isn't working. In my app.js file, here is the controller code that ng-click=\"vm.openModal('custom-modal-1')\" should go to (the slashes are because of the echo statement):

app.controller('screeningsController', ['$scope', '$log', "ModalService", function($scope, $log, ModalService){

    var vm = this;

    vm.message = "Hello World!";
    $log.log(vm.message);

    vm.openModal = openModal;
    vm.closeModal = closeModal;

    function openModal(id){
         ModalService.Open(id);
    }

    function closeModal(id){
        ModalService.Close(id);
    }

    };

}]);

Right after the var vm = this; statement, I'm trying to output a message to the browser console as a test, but it's not working. Maybe my syntax is wrong?

Answer 1

here's a couple quick thoughts. In the first portion, I don't think you were actually capturing the correct click. I added a variable to pass into the on click function to select the one that was actually clicked.

As far as the php, sometimes its easier to toggle out of php and do a chunk of html. If you're passing a lot of html chunks you might want to consider doing output buffering.

<?php

while ($row = mysqli_fetch_array($result)){ ?>

<div class='img_div'>";

<img class="modal_img img_screenings" ng-click="vm.openModal('custom-modal-1')" src="images/<?php echo $row["image"]; ?>" />

</div>

As far as the jquery on the page:

you need to grab the actual node with the click event - the "e" is a common convention for that, but its really just a variable

$('.img_div').on("click", function(e) {

    var source = $(e).attr("src"); // here you grab the actual attribute

    alert(source);

    $('#popup_img').attr('src', source);

});

i'm assuming you actually want to set the img src attribute in your target modal here.