父子范围与模态的问题:使用带有角引导模态($ uibModal)的角ui路由器 [英] 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?

这是一个小伙子: p =预览

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

从模态返回的数据应出现在"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('^');
});

这是您提供的插栓的功能性分支.

另外两件事:我将您使用的ui-router的版本从0.2.something提高到0.3.1-1.0.0的版本还有更多值得探索的功能.而且我还认为您误解了$state上的reload方法.当您在$state.go(stateName, params, options)的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.

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