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

Question

这摘自 Jason Watmore 的关于构建 Angular.js 模态窗口的教程：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);
        }
    }

})();

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

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

}]);

第一个函数只是一个测试，看看控制器是否能够被访问并工作（它是）。第二个功能“控制器”不起作用。 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）绑定到控制器。您可能只想选择其中之一以避免混淆。