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

})();

我尝试将其移植到名为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);
        }
    }

}]);

第一个功能只是测试控制器是否能够到达并工作（它是）。第二个功能“控制器”不起作用。 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

原始文件使用23: <li> 25: <%= image_tag('icons/home', class: "nav-img") %> 24: <%= link_to 'home' do %> 26: <span>Home</span> 27: <% end %> 28: </li> FATAL -- : FATAL -- : app/views/layouts/_altnav.html.erb:25:in `block in _app_views_layouts__altnav_html_erb__' app/views/layouts/_altnav.html.erb:24:in `_app_views_layouts__altnav_html_erb__' app/views/layouts/application.html.erb:22:in `_app_views_layouts_application_html_erb__'函数作为实际控制器：

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）。您可能只想选择其中一个以避免混淆。

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

1 个答案: