Angular modal- pass params from one controller to another

12,133

You can pass more than one data in resovle function.

 $scope.open = function() {
           var modalInstance = $uibModal.open({
               templateUrl: 'myModl.html',
               controller: 'ModalInstanceCtrl',
               resolve: {
                   param: function () {
                       $log.log($scope.dt)
                       return {'data':$scope.data,'yourData' : yourData };
                   }
               }
           });
       };


app.controller('ModalInstanceCtrl', function($scope, $modalInstance, param) {

//        $scope.inputValue = param.data;
        $scope.data = param.data;
        $scope.yourData = param.yourData;    
        $scope.ok = function() {
            $modalInstance.close();
        };

        $scope.cancel = function() {
            $modalInstance.dismiss('cancel');
        };
    });
Share:
12,133
Sarit Rotshild
Author by

Sarit Rotshild

Updated on June 05, 2022

Comments

  • Sarit Rotshild
    Sarit Rotshild almost 2 years

    I have to put several params to the controller of the modal so I can display the value from some in[uts in the modal

    var app = angular.module('myApp', ['ui.bootstrap']);
       app.controller('ctrlTags', function($scope, $uibModal, $log){
    //        $scope.items = tagsData;
           $scope.data = {
               repeatSelect: null,
               availableOptions: [
                   {id: '1', name: 'Option A'},
                   {id: '2', name: 'Option B'},
                   {id: '3', name: 'Option C'}
               ],
           };
            $scope.myVar = false;
            $scope.show = function () {
                $scope.myVar = false;
            }
            $scope.hide = function () {
                $scope.myVar = true;
            }
           $scope.open = function() {
               var modalInstance = $uibModal.open({
                   templateUrl: 'myModl.html',
                   controller: 'ModalInstanceCtrl',
                   resolve: {
                       param: function () {
                           $log.log($scope.dt)
                           return $scope.data;
                       }
                   }
               });
           };
       $scope.ok = function() {
           $scope.showModal = false;
       };
    
       $scope.cancel = function() {
           $scope.showModal = false;
       };
    });
    

    The controller of the modal:

       app.controller('ModalInstanceCtrl', function($scope, $modalInstance, param) {
    
    //        $scope.inputValue = param;
            $scope.data = param
    
            $scope.ok = function() {
                $modalInstance.close();
            };
    
            $scope.cancel = function() {
                $modalInstance.dismiss('cancel');
            };
        });
    

    I have to display more values except the data. How can I pass more params to the modal controller?