mysql — модальное окно Angular.js в php эхо не работает

Я использую код из этого учебника окон модального окна angular.js Джейсона Уотмора: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

Я пытаюсь реализовать модальное окно angular.js в партиале php. Вот код, где я считаю, что есть проблема:

<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')\" следует перейти к (косая черта из-за оператора 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; Заявление, я пытаюсь вывести сообщение на консоль браузера в качестве теста, но это не работает. Может быть, мой синтаксис неправильный?

0

Решение

вот пара быстрых мыслей. В первой части я не думаю, что вы действительно захватили правильный клик. Я добавил переменную для передачи в функцию щелчка, чтобы выбрать ту, которая была фактически нажата.

Что касается 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 на странице:

вам нужно получить фактический узел с помощью события click — для этого принято использовать «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 в вашей целевой модал здесь.

1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector