角模态窗口功能无法正常工作

Question

我在 PHP 部分页面中有一个 Angular 函数，该函数似乎无法正常工作。该函数附加到从 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 函数中找到的那个会触发，并且消息会出现在浏览器控制台中。但是，当在页面上单击任何具有类 modal_img 的 img 时，ng-click 不会执行任何其他操作。

此代码的所有 Angular 模态窗口材料均来自：http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

EDIT 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

Answer 1

要使ng-click="vm.openModal('custom-modal-1')" 起作用，您需要定义什么是vm。

在 AngularJS 中，模板表达式在角度范围内进行评估。

所以你需要告诉模板你打算使用screeningsController。

这就像在代码块中定义一个变量/对象实例，以便代码块可以使用它。

只有这样模板才能使用控制器函数或作用域函数。

因此，您可以通过两种方式公开控制器属性/功能。

1) 通过在 $scope 上填充函数和变量 2) 通过使用this 填充控制器功能，就像您使用var 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 变成 ng-click="screeningsController.openModal('custom-modal-1')"

如果screeningsController as screeningsController 感觉很奇怪，我会将其更改为ScreeningsController as screeningsController，您实际上是在说screeningsController 是 ScreeningsController。 因此，您可能希望将 app.controller('screeningsController' 定义为 相当 app.controller('ScreeningsController'

这就像给控制器类/构造函数命名一样，为什么不以大写开头。

您可以结帐official Angular ngController documentation and the example

我推荐的大部分内容都是为了遵循最佳约定。如果其他一切都正确，您的问题应该由
<div ng-controller="screeningsController as vm" id="screenings">

解决

您可以将 ngController 放置在其他适当的位置，但它必须是您的 ng-click 的某个祖先，需要访问该控制器。