带有模态的父子范围的问题：使用带有角度引导模式的角度 ui 路由器（$uibModal）答案

【问题标题】：Issue with Parent Child Scope With Modal: Using angular ui router with angular bootstrap modal ($uibModal)带有模态的父子范围的问题：使用带有角度引导模式的角度 ui 路由器（$uibModal）
【发布时间】：2016-11-23 14:43:54
【问题描述】：

这是我当前的代码：

父控制器

        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());
          });
        };

模态控制器

没什么大不了的：我正在选择一个值并将结果传回给父控制器

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

这工作正常。

但是，当我尝试通过 UI -Router 执行此操作时，我无法访问“父范围”

我正在做以下事情

.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 是附加到 job-setup.new 的控制器，它是 interviewstage.addStage

的父级

我尝试了一些建议。到目前为止没有任何效果。有什么指点吗？

编辑：这是一个笨蛋：https://plnkr.co/edit/HJT1f1C23s2HQ2jTcy9p?p=preview

这里modal返回的数据应该出现在“partial-home.html”中

【问题讨论】：

当您说“将结果传回给父控制器”时，我假设您是通过“$scope.$emit('gorecruitApp:interviewStageUpdate', 'test');”来执行此操作的既然您将 vm.selectedStage 传递到您的模态 .close() 中，为什么不在 .result.then() 中处理它？
你能创建一个 plunker 吗？状态问题在 angular-ui-router 中并不少见，但如果没有看到 plunker 可以提供的一致的应用程序结构，就很难诊断。
@jbrown“您将 vm.selectedStage 传递到您的模态 .close() 为什么不在 .result.then() 中处理它”：如果您在打开时看到我的代码，我正在这样做来自父控制器的模态。 UI 路由器的挑战是 Modal 的父范围设置为 rootScope，因此 $scope.$emit 不会被 ParentController 捕获。我尝试在打开选项中使用 $scope:scope 。但它不起作用。我会尝试添加一个 plunker
@SummerDeveloper 添加了 plukr。提前致谢
我想你会发现解决方案仅仅是你的模板被混淆了（部分关于在主路由中被称为 onenter ）并问自己应该在 about 中调用什么模式路线。它只是显示，没有类似的 onEnter。

标签： angularjs angular-ui-router angular-ui-bootstrap bootstrap-modal angular-ui

【解决方案1】：

最简单的方法是将数据作为状态参数从模态状态传递回父状态，因此您可以像这样设置父状态：

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

然后，当您将选定的项目作为 close 方法的参数传递出模式时，您可以将 params 对象中的数据设置为返回父状态：

.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.

其他几件事：我将您使用的 ui-router 版本从 0.2.something 升级到 0.3.1 —— 1.0.0 版本还有更多值得探索的功能。而且我认为你误解了$state 上的reload 方法。当您在$state.go(stateName, params, options) 的选项块中传递reload 属性时，就像在模态关闭事件中所做的那样，reload 的值应该是真或假。如果您正在调用$state.reload(stateName)，您可以在此处将状态名称作为字符串传递。 See the docs for more details。

【讨论】：