0

我正在使用 Jason Watmore 编写的 angular.js 模态窗口教程中的代码：http: //jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

我正在尝试在 php 部分中实现 angular.js 模态窗口。这是我认为有问题的代码：

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

第一个问题

while循环吐出一堆图像。然后，底部的脚本应抓取src单击的任何图像，然后src在弹出消息中提醒该图像。但是，它只会提醒循环src中的第一个图像，while而不管单击该束的哪个图像。我已经在具有不同属性while的单独img元素上在循环之外测试了这个脚本，它在回显循环之外运行良好。srcwhile

第二个问题

在while循环ng-click中，第二个回显语句中有一个不起作用。在我的 app.js 文件中，这是ng-click=\"vm.openModal('custom-modal-1')\"应该转到的控制器代码（斜线是由于 echo 语句）：

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

    };

}]);

在var vm = this;声明之后，我试图向浏览器控制台输出一条消息作为测试，但它不起作用。也许我的语法错误？

4

1 回答 1

1

这里有几个快速的想法。在第一部分，我认为您实际上并没有捕捉到正确的点击。我添加了一个变量以传递给 on click 函数以选择实际点击的那个。

就 php 而言，有时更容易切换出 php 并执行一大块 html。如果您要传递大量 html 块，您可能需要考虑进行输出缓冲。

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

至于页面上的jquery：

你需要通过点击事件来获取实际的节点——“e”是一个常见的约定，但它实际上只是一个变量

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

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

    alert(source);

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

});

我假设您实际上想在此处的目标模式中设置 img src 属性。

于 2017-05-14T07:20:36.633 回答