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


mysql php angularjs modal-window angular-controller
person rpivovar    schedule 13.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Что касается 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 в целевом модальном окне.

person Gustavo Lanzas    schedule 14.05.2017