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

14,015

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.

Share:
14,015
NewZeroRiot
Author by

NewZeroRiot

Dad, g33k, .NET/JavaScript developer, guitarist, avid runner, reader. Likes ale. Has sisu.

Updated on June 21, 2022

Comments

  • NewZeroRiot
    NewZeroRiot about 2 years

    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();
                                    };
                                }
                            ]                           
                        });
                    };
                })
            })();
    
  • NewZeroRiot
    NewZeroRiot about 9 years
    Thanks Kaspars, that worked a treat, i've added the actual code which i've simplified for reference to the original question :)