Функция углового модального окна не работает должным образом
У меня есть функция Angular на частичной странице PHP, которая, кажется, не работает должным образом. Функция прикреплена ко всем изображениям, которые загружаются на страницу из базы данных MySQL, и вызывается с помощью ng-click="vm.openModal('custom-modal-1')",
<div id="screenings">
<?php
...
//connect to MySQL database
...
while ($row = mysqli_fetch_array($result)){
echo "<div class='img_div'>";?>
//here is the ng-click that calls the Angular function
<img class="modal_img img_screenings" ng-click="vm.openModal('custom-modal-1')" src='images/<?php echo $row['image']."' >";
...
echo "</div>";
}
?>
</div>
//here is the modal with the id that gets passed to the Angular function
<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>
В файле app.js есть функция, которую я пытаюсь вызвать:
app.controller('screeningsController', ['$scope', '$log', "ModalService", function($scope, $log, ModalService){
var vm = this;
//outputs "Hello World!" to browser console as a test
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);
}
}]);
Когда неполная страница загружена, появляется тестовое сообщение «Hello World!» это находится в пределах функции Angular, и сообщение появляется в консоли браузера. Тем не менее ng-click больше ничего не делает, когда img с классом modal_img нажимается на странице.
Все материалы оконных модальных окон для этого кода были взяты из: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
РЕДАКТИРОВАТЬ Controller as объявляется в верхней части файла app.js, вот так:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'screeningsController',
controllerAs: 'vm'
})
//etc
Решение
За ng-click="vm.openModal('custom-modal-1')" чтобы работать надо определиться что vm,
В AngularJS шаблонное выражение оценивается в угловой области.
Так что вам нужно будет указать шаблон, который вы собираетесь использовать screeningsController,
Это похоже на определение экземпляра переменной / объекта в блоке кода, чтобы блок кода мог его использовать.
Только тогда шаблон может использовать функции контроллера или функции области видимости.
Таким образом, существует два способа предоставления свойств / функций контроллера.
1) Заполнение функций и переменных в $ scope
2) Заполнив функцию контроллера с помощью this как вы использовали вар vm = this;
В вашем случае ваш vm.openModal будет доступен для каждого элемента в id="screenings" если вы объявите этот элемент HTML, как показано ниже.
<div ng-controller="screeningsController" id="screenings">
Однако для того, чтобы функция контроллера пользователя заполнила this надо использовать controller as синтаксис. Таким образом, приведенная выше строка становится такой:
<div ng-controller="screeningsController as vm" id="screenings">
В приведенной выше строке вы говорите, что vm является screeningsController,
Лучше использовать что-то более значимое, чем просто vm в случае, если вы используете более 1 контроллера, скажем, вложенные контроллеры.
Так что можно просто позвонить vm как это есть — в этом случае screeningsController
<div ng-controller="screeningsController as screeningsController" id="screenings">
и нг-щелчок становится
ng-click="screeningsController.openModal('custom-modal-1')"
Если screeningsController as screeningsController чувствует себя странно, я бы изменить это на ScreeningsController as screeningsController где вы, по сути, говорите, screeningsController — это ScreeningsController.
Следовательно, вы можете определить app.controller('screeningsController' как
скорее
app.controller('ScreeningsController'
Это как присвоение имени классу / конструктору Controller, так почему бы не начать с заглавной буквы.
Вы можете оформить заказ официальная документация Angular ngController и пример
Большинство из того, что я порекомендовал, для следующих лучших соглашений. Если все остальное правильно, ваша проблема должна быть решена просто
<div ng-controller="screeningsController as vm" id="screenings">
Вы можете разместить ngController в других подходящих местах, но он должен быть предком вашего ng-клика, которому нужен доступ к этому контроллеру.
Другие решения
Других решений пока нет …