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

2023年5月4日 239次阅读

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

所以’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>

无论出于何种原因,我都无法从抽象父母的兄弟状态转换到其他状态,为什么会有任何想法？

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

点赞