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

问题

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"

回答1:

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.

来源：https://stackoverflow.com/questions/40767450/issue-with-parent-child-scope-with-modal-using-angular-ui-router-with-angular-b