AngularJS $modalInstance - 我可以在一个控制器中做到这一点吗? [英] AngularJS $modalInstance - Can i do this in one controller?

问题描述

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

为什么我实际上想要两个控制器?在两个控制器之间传递范围对我来说似乎有点矫枉过正，而且项目越大，它就越难以管理.我是否试图不必要地过度简化?:)

脚本:

(function(){var app = angular.module('ngModalDemo', ['ui.bootstrap']).controller('formController', function($scope, $modal){$scope.openModal = 函数 () {var modalInstance = $modal.open({templateUrl: 'SomeModal.html',控制器:'formController'});};$scope.closeModal = 函数 () {//这里需要的代码:)};})})();

HTML 正文(为了演示的目的，请原谅脚本中的 HTML):

 
<button class="btn btn-default" ng-click="openModal()">让我们做些事情吧！</button><script type="text/ng-template" id="SomeModal.html"><div class="modal-header">你们都在这个模态中做一些事情.</div><div class="modal-footer"><button class="btn btn-info" ng-click="closeModal()">关闭</button>

答案基于 Kaspars 的输入 :)

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

解决方案

我遇到了同样的问题，我想出的最好办法是使用匿名函数作为模态控制器.这样，所有逻辑都在同一个控制器中，您不必为每个模态窗口创建单独的控制器.

这看起来像这样:

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

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

I've spent some time having a play with the AngularJS Bootstrap popup, and for intents it's working great, but what i'd like to do is bind it, and it's dependant script to the same controller, what i can't get working is the close button now though. If i create a NEW controller, and inject $modalInstance it works great and i can wireup the close button without any issues at all, but i don't want a second controller, it seems to be over complication: i want all my controller logic in the formController really.

Why would i actually want two controllers? Passing the scope between two controllers just seems overkill to me, and the larger a project becomes the more un-managable it will become. Am i trying to over-simplify this unnecessarily? :)

The script:

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

The HTML body (excuse the HTML in script for the purposes of the DEMO):

    <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>

The answer based on Kaspars' input :)

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

解决方案

I was struggling with the same problem and the best thing I came up with was to use anonymous function as a modal controller. In that way all the logic is in the same controller and you don't have to create separate controller for each modal window.

This would look like this:

(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. Haven't tested code above, just put it together from your provided code and fragments from one of my projects.

这篇关于AngularJS $modalInstance - 我可以在一个控制器中做到这一点吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！