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

}]);

当加载部分页面时，测试消息＆＃34; Hello World！＆＃34;在Angular函数fires中找到，消息显示在浏览器控制台中。但是，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

Answer 1

要使ng-click="vm.openModal('custom-modal-1')"工作，您需要定义vm。

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

因此，您需要告诉模板您打算使用screeningsController。

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

只有这时模板才能使用控制器功能或范围功能。

因此，有两种方法可以公开控制器属性/函数。

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称为“{1}} - 在这种情况下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'

就像为Controller类/构造函数命名一样，为什么不从Capital case开始。

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

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

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

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

1 个答案: