使用模态的父子范围问题:使用具有角度引导模式的角度 ui 路由器 ($uibModal) [英] Issue with Parent Child Scope With Modal: Using angular ui router with angular bootstrap modal ($uibModal)

问题描述

这是我当前的代码:

父控制器

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

模态控制器

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

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

这工作正常.

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

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

我正在做以下事情

.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

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?

这是一个plunker:https://plnkr.co/edit/HJT1f1C23s2HQ2jTcy9p?p=预览

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

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

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

推荐答案

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

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

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

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

这是您提供的 plunker 的功能分支.

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

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.

这篇关于使用模态的父子范围问题:使用具有角度引导模式的角度 ui 路由器 ($uibModal)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！