AngularJS 从同级转换到抽象状态的同级

Question

我一直在使用 angular-ui-router 并试图从同一抽象的另一个子节点过渡到我的一个抽象状态的子节点。这张图更好地展示了这个想法：

所以 'R' 是模块，'blue 1' 是我的抽象状态

<ui-view/>

我已将绿色“1”自动加载到视图中。我遇到的问题是从绿色“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

尝试在最顶层的控制器中添加以下 console.log 输出

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ 
  console.log('$stateChangeError', error');
})

同时添加

$rootScope.$on('$stateNotFound', 
function(event, unfoundState, unfoundStateParams, fromState, fromParams, error){ 
  console.log('$stateNotFound', unfoundState, unfoundStateParams, fromState, fromParams);
})

其中之一应该会告诉您发生了什么事

Answer 2

有时是打字错误，有时是...一些隐藏设置。你能做的最好的事情就是观察我根据你的场景创建的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 并与您本地的解决方案进行比较，您应该会找到问题所在

AngularJS 从同级转换到抽象状态的同级

AngularJS Transition to sibling of abstract state from sibling

state

nested

siblings

angularjs

angular-ui-router