Angular.js - 不明白为什么我的控制器功能没有触发

Question

这摘自 Jason Watmore 关于构建 Angular.js 模态 window 的教程：http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

这是一个名为 index.controller.js 的单独文件，其中仅包含此控制器。

(function () {

    angular
        .module('app')
        .controller('Home.IndexController', Controller);

    function Controller(ModalService) {
        var vm = this;

        vm.openModal = openModal;
        vm.closeModal = closeModal;

        function openModal(id){
            ModalService.Open(id);
        }

        function closeModal(id){
            ModalService.Close(id);
        }
    }

})();

我已经尝试将其移植到名为 screeningsController 的控制器中的 app.js 文件中，如下所示：

app.controller('screeningsController', ['$scope', '$log', function($scope, $log){

    // this is a test function
    $scope.popup = function() {

    // assign a message to the $scope
    $scope.message = 'Hello World!';

    // use the $log service to output the message in a console
    $log.log($scope.message);

    };

    // this is the function that was ported over
    function Controller(ModalService) {
        var vm = this;

        vm.openModal = openModal;
        vm.closeModal = closeModal;

        function openModal(id){
            ModalService.Open(id);
        }

        function closeModal(id){
            ModalService.Close(id);
        }
    }

}]);

第一个功能只是一个测试，看看控制器是否能够到达并工作（它是）。第二个函数 "Controller" 不起作用。 Dreamweaver 抛出错误，“'Controller' 已定义但从未使用过。”这不会在浏览器控制台中引发任何错误，但该函数不会执行任何操作。

这是我放映的一部分 screenings.php，其中调用了这些函数：

...
while ($row = mysqli_fetch_array($result)){
        echo "<div id='img_div' ng-click='popup()'>";
            echo "<img id='img_screenings' class='modal_img' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";
...

第一个回声包含测试功能，第二个回声包含其他功能。这正是教程代码中调用该函数的方式。供参考：

<img class="picture" ng-click="vm.openModal('custom-modal-1')" src="picture.png">

考虑到所有这些，是否有任何迹象表明为什么第二个函数在我的代码中不起作用？

Answer 1

原文件使用Controller函数作为实际控制人：

.controller('Home.IndexController', Controller);

但是您创建了自己的控制器，然后将整个 Controller 功能移到您自己的 中。你只需要使用函数：

app.controller('screeningsController', ['$scope', '$log', "ModalService", function($scope, $log, ModalService){

    // this is a test function
    $scope.popup = function() {

    // assign a message to the $scope
    $scope.message = 'Hello World!';

    // use the $log service to output the message in a console
    $log.log($scope.message);

    };

    var vm = this;

    vm.openModal = openModal;
    vm.closeModal = closeModal;

    function openModal(id){
        ModalService.Open(id);
    }

    function closeModal(id){
        ModalService.Close(id);
    }

}]);

编辑：现在您以两种不同的方式绑定到您的控制器（$scope 和this）。您可能只想选择其中一个以避免混淆。

Angular.js - 不明白为什么我的控制器功能没有触发

Angular.js - Not understanding why my controller function isn't firing

javascript

php

angularjs

angular-ui-router

angular-controller