Question

我一直在使用angular-ui-router并尝试从同一摘要的另一个孩子中过渡到我的一个抽象状态的孩子。这个图表显示了更好的想法：

abstract tree

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

<ui-view/>

我自动将绿色'1'加载到视图中。我遇到麻烦的是从绿色'1'中的ui-sref导航到红色'2'。有什么我必须做的特别是跳到蓝色'1'或抽象状态然后加载'red2'状态？

::注:: 如果我将ui-sref调用放入摘要模板并从那里调用它，状态转换就可以了。

这是我在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并与您当地的解决方案进行比较，您应该找到问题

Answer 2

尝试在最顶级控制器中添加以下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);
})

其中一个应该告诉你发生了什么

AngularJS从兄弟姐妹过渡到抽象状态的兄弟

2 个答案: