Issue with Parent Child Scope With Modal: Using angular ui router with angular bootstrap modal ($uibModal)

Question

Here is my current code:

Parent Controller

        vm.animationsEnabled = true;

        vm.open = function (size) {
          var modalInstance = $uibModal.open({
            animation: vm.animationsEnabled,
            templateUrl: 'app/entities/interview-stage/interview-stage-list-add-dialog.html',
            controller: 'InterviewStageListAddDialogController',
            controllerAs: 'vm',
            size: 'cs',
          });

          modalInstance.result.then(function (selectedItem) {        	 
        	vm.interviewPlanSetUp.push(selectedItem);        	
          }, function () {
            //$log.info('Modal dismissed at: ' + new Date());
          });
        };

Modal Controller

Nothing major going on: I am selecting a value and passing back the result to the parent controller

function save () {
        	
        	vm.selectedStage.rounds=vm.selectedRound;
        	$uibModalInstance.close(vm.selectedStage);
        	$scope.$emit('gorecruitApp:interviewStageUpdate', 'test');
        }

This is working fine.

However when I am trying to do this through UI -Router I am not able to access "Parent Scope"

I am doing the following

.state('interview-stage.addStage',{
               parent:'job-setup.new',
               url:'/addStage',
               data:{
                       authorities: ['ROLE_USER']
               },
               onEnter:['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                $uibModal.open({
                    templateUrl: 'app/entities/interview-stage/interview-stage-list-add-dialog.html',
                    controller: 'InterviewStageListAddDialogController',
                    controllerAs: 'modal',
                    scope: $scope,
                    backdrop: 'static',
                    size: 'cs',
                    resolve: {
//                        entity: ['InterviewStage', function(InterviewStage) {
//                            return InterviewStage.get({id : $stateParams.id}).$promise;
//                        }]
                    }
                }).result.then(function() {
                    $state.go('job-setup.new', null, { reload: 'job-setup.new' });
                }, function() {
                    $state.go('^');
                });
            }]
        })

Parent Controller is the controller attached to job-setup.new which is the parent of interviewstage.addStage

I have tried few suggestions. Nothing worked so far. Any pointers?

EDIT: Here is a plunker: https://plnkr.co/edit/HJT1f1C23s2HQ2jTcy9p?p=preview

Here the data returned from modal should appear in "partial-home.html"

When you say "passing back the result to the parent controller" I assume you are doing that through "$scope.$emit('gorecruitApp:interviewStageUpdate', 'test');" Since you are passing vm.selectedStage into your modal .close() why not handle it in the .result.then()? — jbrown
Can you create a plunker? State issues are not uncommon with angular-ui-router but it's hard to diagnose without seeing coherent app structure as plunker can provide. — Summer Developer
@jbrown "you are passing vm.selectedStage into your modal .close() why not handle it in the .result.then()": I am doing this if you see my code while opening up the modal from the parent controller. The challenge with UI router is Modal's parent scope is set to rootScope, so $scope.$emit is not being caught in ParentController. I tried using $scope:scope in open options. But it is not working. I will try to add a plunker — Abhijit Mazumder
I think you will find the solution is merely that your templates are mixed up (partial-about is being called onenter in a home route) and ask yourself what is supposed to be calling the modal in the about route. It's just displaying, with no similar onEnter. — Summer Developer

Bennett Adams Bennett Adams · Accepted Answer · 2017-06-23T20:33:52

The simplest approach would be to pass the data back as a state parameter from the modal state to the parent state, so you might set up your parent state like:

state('job-setup.new',{
  url:'/new',
  params: { item: null },
  ...

And then when you pass the selected item out of the modal as the argument of the close method, you can set that data in the params object to go back to the parent state:

.result.then(function modalClosed(selectedItem) {
  $state.go('home', { item: selectedItem }, { reload: true });
}, function modalDismissed() {
  $state.go('^');
});

Here is a functioning fork of the plunker you provided.

A couple other things: I bumped up the version of ui-router you were using from 0.2.something to 0.3.1 -- and the 1.0.0 version has many more features worth exploring. And also I think you were misunderstanding the reload method on $state. When you pass a reload property in the options block in $state.go(stateName, params, options), as you do on the modal close event, reload's value should be true or false. If you are calling $state.reload(stateName), that is where you would pass the state name as a string. See the docs for more details.

Issue with Parent Child Scope With Modal: Using angular ui router with angular bootstrap modal ($uibModal)

1 Answers