AngularJS $modalInstance - 我可以在一个控制器中执行此操作吗？

Question

我花了一些时间玩弄 AngularJS Bootstrap 弹出窗口，为了它的意图它工作得很好，但我想做的是绑定它，它是依赖的脚本到同一个控制器，但我现在无法工作的是关闭按钮。如果我创建一个新控制器，并注入 $modalInstance 它工作得很好，我可以毫无问题地连接关闭按钮，但我不想要第二个控制器，它似乎过于复杂：我想要我所有的控制器逻辑在 formController 中真的。

为什么我真的想要两个控制器？在两个控制器之间传递范围对我来说似乎有点过分了，项目越大，它就越难以管理。我是否试图不必要地过度简化它？ :)

脚本：

(function(){
    var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
    .controller('formController', function($scope, $modal){
        $scope.openModal = function () {                        
            var modalInstance = $modal.open({
                templateUrl: 'SomeModal.html',
                controller: 'formController'                                            
            });
        };
        $scope.closeModal = function () {
            //  Code needed here :)
        };
    })
})();

HTML正文（出于演示目的，请原谅脚本中的HTML）：

    <div ng-controller="formController">
        <button class="btn btn-default" ng-click="openModal()">Let's do some stuff!</button>

        <script type="text/ng-template" id="SomeModal.html">
            <div class="modal-header">Do some stuff in this modal y'all.</div>
            <div class="modal-footer">
                <button class="btn btn-info" ng-click="closeModal()">Close</button>
            </div>
        </script>
    </div>

答案基于 Kaspars 的输入:)

    (function(){
            var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
            .controller('formController', function($scope, $modal, $log){
                $scope.openModal = function () {                        
                    var modalInstance = $modal.open({
                        templateUrl: 'SomeModal.html',
                        controller: [
                            '$scope', '$modalInstance', function($scope, $modalInstance){
                                $scope.closeModal = function () {
                                    $modalInstance.close();
                                };
                            }
                        ]                           
                    });
                };
            })
        })();

Answer 1

我一直在努力解决同样的问题，我想出的最好的办法是使用匿名函数作为模态控制器。这样，所有逻辑都在同一个控制器中，您不必为每个模态 window.

创建单独的控制器

这看起来像这样：

(function(){
    var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
    .controller('formController', function($scope, $modal){
        $scope.openModal = function () {                        
            var modalInstance = $modal.open({
                templateUrl: 'SomeModal.html',
                controller: [
                    '$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
                        $scope.data = data;
                        $scope.ok = function() {
                            $modalInstance.close();
                        };
                        $scope.closeModal = function() {
                            $modalInstance.dismiss();
                        };
                    }
                ]
            });
        };
    })
})();

PS。上面的代码没有测试过，只是把你提供的代码和我的一个项目的片段放在一起。

Answer 2

你也可以试试这个

    var modalInstance = $modal.open({
                                templateUrl : 'someTemplate.html',
                                scope : $scope,
                                size : 'md'
                            });

AngularJS $modalInstance - 我可以在一个控制器中执行此操作吗？

AngularJS $modalInstance - Can i do this in one controller?

angularjs

angular-ui

bootstrap-modal