angularjs – 具有多个父项的子状态/模态的路径,可以打开多个状

发布时间：2020-12-17 07:22:39 所属栏目：安全来源：网络整理

导读：我有一个抽象的配置文件状态,它有多个子状态(对于配置文件页面的不同选项卡),然后我想让另一个子配置文件状态为模态.我已经实现了这样的事情： $stateProvider .state('profile',{ url: '/profile/:profileID',templateUrl: 'profile.html',controller: 'Pro

我有一个抽象的配置文件状态,它有多个子状态(对于配置文件页面的不同选项卡),然后我想让另一个子配置文件状态为模态.我已经实现了这样的事情：

$stateProvider
    .state('profile',{
        url: '/profile/:profileID',templateUrl: 'profile.html',controller: 'ProfileCtrl',abstract:true,resolve: {
            user: ...
        }
    })
    .state('profile.circles',{
        url: '',templateUrl: 'profilecircles.html',controller: 'profilecirclesCtrl',resolve: { circle: ... }
    })
    .state('profile.squares',{
        url: '/collections',templateUrl: 'profilesquares.html',controller: 'profilesquaresCtrl',resolve: { squares: ... }
    })
    .state('profile.editprofile',{
        url: '/edit',onEnter: ['$window','$modal',function($window,$modal) {
            $modal.open({
                templateUrl: 'editprofile.html',controller: 'editProfileCtrl',resolve: {
                    user: ...
                }
            }).result.then(function() {
                $window.history.back();
            },function() {
                $window.history.back();
            });
        }]
    })

这很有效,除了因为editprofile是正方形和圆形的兄弟,当该状态处于活动状态并且模态处于视图中时,正方形或圆形状态被卸载,并在模态关闭时再次加载.

当profile.editprofile状态处于活动状态时,有没有办法让这些状态保持活动状态？我正在追逐像state..editprofile这样的东西.

由于目前还没有理想的解决方案,我提出了一个相当优雅的解决方案.我的代码是通用的,易于理解和评论,因此它应该很容易适应任何项目.

请参阅代码中的注释以获取最重要的要点.

Live Demo (click).

样本国家

$stateProvider

// modal will open over this state from any substate
.state('foo',{
  abstract: true,url: '/:fooProp',templateUrl: 'foo.html',controller: 'FooController'
})
.state('foo.main',{
  url: '',templateUrl: 'foo-main.html',controller: 'FooMainController'
})
.state('foo.bar',{
  url: '/bars/:barId',templateUrl: 'foo-bar.html',controller: 'FooBarController'
})

// append /modal route to each `foo` substate
.state('foo.main.modal',getModalState())
.state('foo.bar.modal',getModalState())

;

function getModalState() {
  return {
    url: '/modal',onEnter: [
      '$modal','$state',function($modal,$state) {
        $modal.open({
          templateUrl: 'foo-modal.html',controller: 'FooModalController'
        }).result.finally(function() {
          // go to parent state - the current `foo` substate
          $state.go('^');
        });
      }
    ]
  }
}

调节器

$scope.goToModalState = function() {
  // go to this state's `modal` state
  $state.go($state.current.name+'.modal');
};

视图

<a ng-click="goToModalState()">Open Modal</a>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!