Search code examples
javascriptangularjsangularjs-scopeangular-ui-bootstrapangular-directive

How to have two different modals on a same controller on a same page?

I need to have two modal windows on my page, inside of each window is a form with some field, but i dont know how to put all that in a same controller. Here is a plunker link to my code

<html>http://plnkr.co/edit/pudTGMcTAiNNJxHjYNut?p=preview</html>

It works ok but i dont know how to merge that two controllers into one

Solution

  • I had a look at your plunker code, it was pretty easy to combine the AddControllerGroup into AddController. The only thing stopping it was that you called your method open in both controllers.

    The updated AddController looks like this:

    sitesApp.controller('AddController', function ($scope, $modal) {
    $scope.openAddSite = function () {
        var modalInstance = $modal.open({
            templateUrl: 'addSites.html',
            controller: 'ModalInstanceCtrl'
        });
    };

    $scope.sites = [
        {
            url:'',
            color:'',
            groups: []
        },
        {
            url:'',
            color:'',
            groups: []
        },
        {
            url:'',
            color:'',
            groups: []
        }
    ];

    $scope.openAddGroup = function () {
        var modalInstance = $modal.open({
            templateUrl: 'addGroups.html',
            controller: 'ModalInstanceCtrl'
        });
    };

    $scope.groups = [
        {
            name:'',
            color:'',
            sites: []
        },
        {
            name:'',
            color:'',
            sites: []
        },
        {
            name:'',
            color:'',
            sites: []
        }
    ];
});

    Then I just changed your two buttons to call openAddSite() and openAddGroup() and it all worked.

    You still need to wire up some code to handle the results from the modal, but this should get you started.