在 AngularJS UI Bootstrap Modal 中调用另一个控制器 [英] Calling another controller within AngularJS UI Bootstrap Modal

问题描述

根据此处的示例，我有一个完整的 ui.bootstrap.modal 版本 http://angular-ui.github.io/bootstrap/#/modal 但我想更进一步并将其添加到我的控制器配置中.

I have a completely working version of the ui.bootstrap.modal as per the example here http://angular-ui.github.io/bootstrap/#/modal but I want to take a stage further and add it to my controller configuration.

也许我走得太远(或做错了)，但我不只是喜欢

Perhaps I'm taking it too far (or doing it wrong) but I'm not a fan of just

var ModalInstanceCtrl = function ($scope...

我的模态开放控制器:

var controllers = angular.module('myapp.controllers', []);


controllers.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
    function($scope,  $modal, $log) {

        $scope.client = {};

        $scope.open = function(size) {
            var modalInstance = $modal.open({
                templateUrl: 'templates/modals/create.html',
                controller: ModalInstanceCtrl,
                backdrop: 'static',
                size: size,
                resolve: {
                    client: function () {
                        return $scope.client;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $log.info('Save changes at: ' + new Date());
            }, function () {
                $log.info('Closed at: ' + new Date());
            });
        };
    }
]);

模态实例控制器:

var ModalInstanceCtrl = function ($scope, $modalInstance, client) {

    $scope.client = client;

    $scope.save = function () {
        $modalInstance.close(client);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

但是我想将最后一个控制器更改为:

However I would like to change this last controller to:

controllers.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'client',
    function ($scope, $modalInstance, client) {

        $scope.client = client;


        $scope.save = function () {
            $modalInstance.close(client);
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    }
]);

如果我还在 $scope.open 中将 ModalDemoCtrl 控制器的控制器引用更新为

If I also update the controller reference within $scope.open for ModalDemoCtrl controller to

controller: controllers.ModalInstanceCtrl

然后没有错误，但模式窗口中的保存和取消按钮不再起作用.

then there are no errors but the save and cancel buttons within the modal window no longer work.

有人能指出我哪里出错了 - 可能是对控制器在 AngularJS 中的工作方式缺乏了解吗?！

Could someone point out where I am going wrong - possibly a fundamental lack of understanding of the way controllers work within the AngularJS?!

推荐答案

$scope.open 中指定的控制器需要用单引号将其括起来.

Controller specified in $scope.open needed single quotes around it.

 controller: 'ModalInstanceCtrl',

这篇关于在 AngularJS UI Bootstrap Modal 中调用另一个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！