角度路由ui-view在另一个ui-view中

Question

概念概述:

我们在索引html上有两个标签.我们在那里路由那些标签:

<div ui-view></div>

在第二个选项卡上,我们有一个选择器,在另一个ui视图中切换选项卡的内容,如下所示:

<div ui-view="{{vm.currentView}}"></div>

其中vm.currentView是路由状态的名称('book1'等).

 .state('tab2', {
        abstract: true,
        templateUrl: 'tab2.html',
        controller: 'Tab2Controller',
        controllerAs: 'vm'
    })
    .state('tab2.content', {
        url: '/tab2',
        views: {
            '': {
                templateUrl: 'tab2.html'
            },
            'book1@tab2': {
                templateUrl: 'tab2-book1.html'
            },
            'book2@tab2': {
                templateUrl: 'tab2-book2.html'
            },
            'book3@tab2': {
                templateUrl: 'tab2-book3.html'
            },
            'book4@tab2': {
                templateUrl: 'tab2-book4.html'
            }
        }
    });

一切都很好,除了一件事:数据内容和视图名称正在改变,但模板内容不是.

我通过另一种方式解决了这个问题(基于排除'ui-view in another ui-view'概念和单独的状态视图).但我仍然想知道:"如何使用'ui-view inside ui-view'概念来做到这一点？"

这是一个Plunker示例

Answer 1

它可以在另一个ui-view中制作"ui-view".

假设你有一个index.html

<div ui-view="content"></div>

和州提供者是这样的: -

$stateProvider
   .state('books', {
        parent: 'pages',
        url: '/books',                   
        views: {
            'content@': {
                 templateUrl: 'books.html',
                 controller: 'BooksController'
             }
        }
   })

在books.html中,您有一些链接和另一个ui-view(嵌套的ui-view).点击链接填充嵌套的ui-view.

books.html

<div>
     <a ui-sref="book1"></a>
     <a ui-sref="book2"></a>
     <a ui-sref="book3"></a>
</div>
<!-- nested ui-view -->
<div ui-view="bookDetails"></div>

现在国家提供者是: -

 $stateProvider
    .state('books', {
        parent: 'pages',
        url: '/books',                   
        views: {
            'content@': {
                 templateUrl: 'books.html',
                 controller: 'BooksController'
             }
        }
    })
    .state('book1', {
        parent: 'books',                  
        views: {
            'bookDetails@books': {
                 templateUrl: 'book1.html',
                 controller: 'BookOneController'
             }
        }
    })
    .state('book2', {
        parent: 'books',                 
        views: {
            'bookDetails@books': {
                 templateUrl: 'book2.html',
                 controller: 'BookTwoController'
             }
        }
    })
    .state('book3', {
        parent: 'books',                
        views: {
            'bookDetails@books': {
                 templateUrl: 'book3.html',
                 controller: 'BookThreeController'
             }
        }
    })

bookDetails @ books: - 在'books'状态下填充'bookDetails'ui-view,或者我们可以说在'books'状态下找到'bookDetails'ui-view并用'views'对象填充它.