AngularJS从 sibling 转换到抽象状态的 sibling

Question

我一直在使用 angular-ui-router 并尝试从同一抽象的另一个 child 中转换到我的一个抽象状态的 child 。这张图更好地展示了这个想法:



所以“R”是模块，“蓝色 1”是我的抽象状态

<ui-view/>

我将绿色的“1”自动加载到 View 中。我遇到的问题是从绿色“1”内的 ui-sref 导航到红色“2”。有什么我必须做的特别是跳入蓝色'1'或抽象状态然后加载'red2'状态？

::注意::
如果我将 ui-sref 调用放入摘要模板并从那里调用它，则 statechange 有效。

这是我在 app.js 中的状态设置:

var app = angular.module( 'app', [ 'ui.router' ] );

app.config( function( $stateProvider, $urlRouterProvider ) {
     $stateProvider
        .state( 'Papers',  {
        url: "/Papers",
        abstract: true,
        template: '<ui-view />'
    }) // nested paper states
    .state( 'Papers.home', {
        url: '', // default load, no path defined
        templateUrl: 'templates/views/connect/Papers.home.html',
        controller: 'whitePapersController'
    })
    .state( 'Papers.paper1', {
        url: '/paper1',
        templateUrl: 'templates/views/connect/Papers.paper1.html',
        controller: 'PapersController'
    })
    .state( 'Papers.paper2', {
        url: '/paper2',
        templateUrl: 'templates/views/connect/Papers.paper2.html',
        controller: 'PapersController'
    });  
}

这是papers.home.html的一个例子:

<h3>
    <a ui-sref="Papers.paper1">
        click me for paper 1
    </a>
</h3>

<h3>
    <a ui-sref="Papers.paper2">
        click me for paper 2
    </a>
</h3>

无论出于何种原因，我都无法从抽象父级的同级状态中转换到其他状态，知道为什么吗？

Answer 1

有时是拼写错误，有时是……一些隐藏的设置。你能做的最好的就是观察 this working example ，这是我根据您的场景创建的。

关键是，我使用了你的定义 1 : 1 - 和 它正在工作

var app = angular.module( 'app', [ 'ui.router' ] )

.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Papers');

    .state( 'Papers',  {
        url: "/Papers",
        abstract: true,
        template: '<ui-view />'
    }) // nested paper states
    .state( 'Papers.home', {
        url: '', // default load, no path defined
        templateUrl: 'templates/views/connect/Papers.home.html',
        controller: 'whitePapersController'
    })
    .state( 'Papers.paper1', {
        url: '/paper1',
        templateUrl: 'templates/views/connect/Papers.paper1.html',
        controller: 'PapersController'
    })
    .state( 'Papers.paper2', {
        url: '/paper2',
        templateUrl: 'templates/views/connect/Papers.paper2.html',
        controller: 'PapersController'
    });  
    }
])
.controller('whitePapersController', ['$scope', function ($scope) { 
}])
.controller('PapersController', ['$scope', function ($scope) { 
}])

所以，这是有效的。照原样。查看 that example并与您本地的解决方案进行比较，您应该会发现问题