angularjs - 具有多个父项/路径的子状态，用于打开多个状态的模态

Question

我有一个摘要 profile状态，它有多个子状态(针对个人资料页面的不同选项卡)，然后我想让个人资料的另一个子状态成为模态。我已经实现了它是这样的:

$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 是正方形和圆形的同级，当该状态处于事件状态并且模式在 View 中时，正方形或圆形状态被卸载，并在模式关闭时再次加载回来。

当 profile.editprofile 状态处于事件状态时，有没有办法让这些状态保持事件状态？我正在寻找类似 state..editprofile 的东西.

Answer 1

由于目前没有理想的解决方案，我想出了一个相当优雅的解决方案。我的代码是通用的、易于理解和注释的，因此它应该很容易适应任何项目。

有关最重要的点，请参阅代码中的注释。

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

Controller

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

看法

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