Angular.js php 内的模态 window 回声不起作用
Angular.js modal window within php echoes not working
我正在使用 Jason Watmore angular.js 模态 window 教程中的代码:http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
我正在尝试在 php 部分中实现 angular.js 模态 window。这是我认为有问题的代码:
<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
。但是,它只提醒 while
循环中第一个图像的 src
,而不管点击了图像束中的哪个图像。我已经在具有不同 src
属性的单独 img
元素的 while
循环之外测试了此脚本,并且它在 echoed while
循环之外工作正常。
第二题
在 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;
语句之后,我试图向浏览器控制台输出一条消息作为测试,但它不起作用。也许我的语法有误?
这里有一些简短的想法。在第一部分中,我认为您实际上并没有捕捉到正确的点击。我添加了一个变量以传递给单击函数 select 实际单击的那个。
就 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 属性。
我正在使用 Jason Watmore angular.js 模态 window 教程中的代码:http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
我正在尝试在 php 部分中实现 angular.js 模态 window。这是我认为有问题的代码:
<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
。但是,它只提醒 while
循环中第一个图像的 src
,而不管点击了图像束中的哪个图像。我已经在具有不同 src
属性的单独 img
元素的 while
循环之外测试了此脚本,并且它在 echoed while
循环之外工作正常。
第二题
在 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;
语句之后,我试图向浏览器控制台输出一条消息作为测试,但它不起作用。也许我的语法有误?
这里有一些简短的想法。在第一部分中,我认为您实际上并没有捕捉到正确的点击。我添加了一个变量以传递给单击函数 select 实际单击的那个。
就 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 属性。