gpt4 book ai didi

php - php 中的 Angular.js 模式窗口回显不起作用

转载 作者:行者123 更新时间:2023-11-29 10:49:41 26 4
gpt4 key购买 nike

我正在使用 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具有不同 src 的元素属性,并且在回显的 while 之外工作正常环形。

第二个问题

while内循环,有一个ng-click在第二个回应的声明中,这是行不通的。在我的 app.js 文件中,以下是 ng-click=\"vm.openModal('custom-modal-1')\" 的 Controller 代码应该转到(斜杠是因为 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;之后声明,我试图向浏览器控制台输出一条消息作为测试,但它不起作用。也许我的语法错误?

最佳答案

这里有一些简单的想法。在第一部分中,我认为您实际上并未捕获正确的点击。我添加了一个变量以传递到单击函数中以选择实际单击的变量。

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

<?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 属性。

关于php - php 中的 Angular.js 模式窗口回显不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43958188/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com