Angular ui-router 使用嵌套视图重定向回父状态

Question

我在 Angular 中有一个路由器：

var scenarioManagementModule = angular.module( 'scenarioManagementModule', ['ngResource', 'scenarioModule'])
.config(['$stateProvider', '$urlRouterProvider',
  function( $stateProvider, $urlRouterProvider){
    $stateProvider.state( 'scenario_management', {
        url:         '/scenario_management',
        templateUrl: 'index.html',
        controller:  function( $scope, $state ) {
            $state.transitionTo('scenario_management.scenarios', { reload: true, inherit: false, notify: true });
        }
    });

    $stateProvider.state( 'scenario_management.scenarios', {
        url:         '/scenarios',
        templateUrl: '/scenarios.html',
        controller:  'ScenarioListController',
        resolve:     {
            scenarios_data:  function( $stateParams, Scenario ){
                return Scenario.list();
            }
        }
    });

    $stateProvider.state( 'scenario_management.scenarios.create', {
        url:            '/create',
        templateUrl:    '/scenario.create.html',
        controller:     'ScenarioCreateController',
    });
}]);

我的视图设置正确。所有父模板的 ui 视图都在正确的位置，当我尝试通过在浏览器中粘贴 url 来访问创建页面时，它可以完美运行。

但是，当我以编程方式尝试使用以下代码调用创建状态时，会发生一些奇怪的事情：

$state.transitionTo('scenario_management.scenarios.create', $stateParams, { reload: true, inherit: false, notify: true });

通过console.log，我可以看到创建状态正在根据需要加载，但是当这个状态完成加载时，它的父状态立即再次开始加载。结果，创建状态再次消失。而且根据浏览器的url，我现在又回到了父状态。

我做错了吗？有人可以告诉我发生了什么，我如何确保创建状态保持加载？

Answer 1

如果您不想正确加载此状态，可以使用 abstract: true。