0

我在似乎无法正常工作的 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 函数中找到的那个会触发，并且消息会出现在浏览器控制台中。但是，当在页面上单击任何类ng-click时，不会做任何其他事情。imgmodal_img

此代码的所有 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
4

1 回答 1

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按原样称呼-在这种情况下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'

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

您可以查看官方 Angular ngController 文档和示例

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

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

于 2017-05-15T02:30:36.163 回答