Angular 模态 window 功能无法正常工作

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);
    }

}]);

加载部分页面时，在 Angular 函数中找到的测试消息 "Hello World!" 会触发，并且该消息会出现在浏览器控制台中。但是，当在页面上单击 img 和 class modal_img 时，ng-click 不会执行任何其他操作。

此代码的所有Angular模态window材料取自：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 中，模板表达式在 angular 范围内求值。

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

这就像在代码块中定义一个 variable/object 实例，以便代码块可以使用它。

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

所以有两种方法可以公开控制器 properties/functions。

1) 通过在 $scope 上填充函数和变量 2) 通过使用 this 填充控制器功能，就像您使用 var vm = this;

在你的情况下，如果你如下声明 HTML 元素，你的 vm.openModal 将可用于 id="screenings" 下的每个元素。

<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'

这就像给控制器起个名字class/constructor 所以为什么不从大写开始呢。

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

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

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

Angular 模态 window 功能无法正常工作

Angular modal window function not working properly

php

angularjs

angularjs-directive

partial

modal-window