javascript - Angular.js - 不明白为什么我的 Controller 功能没有触发

Question

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

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

(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 的 Controller 中的 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 是否能够到达并工作(确实如此)。第二个功能“ Controller ”不起作用。 Dreamweaver 抛出错误:“'Controller' 已定义但从未使用。”这不会在浏览器控制台中引发任何错误，但该函数不会执行任何操作。

这是我的筛选部分筛选.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']."' >";
...

第一个 echo 包含测试函数，第二个 echo 包含其他函数。这正是教程代码中调用该函数的方式。供引用:

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

鉴于这一切，是否有任何迹象表明为什么第二个函数在我的代码中不起作用？

Answer 1

原始文件使用Controller函数作为实际 Controller :

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

但是您创建了自己的 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);
    }

}]);

编辑:现在您可以通过两种不同的方式绑定(bind)到 Controller ($scope 和 this)。您可能只想选择其中之一以避免混淆。