概念概述:
我们在索引 html 上有两个选项卡。我们这样路由这些选项卡:
<div ui-view></div>
在第二个选项卡上,我们有一个选择器,可以在另一个 ui View 中切换选项卡的内容,如下所示:
<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'
}
}
});
一切都很好,除了一件事:数据内容和 View 名称正在更改,但模板内容没有。
我通过另一种方式解决了这个问题(基于排除“另一个 ui-view 中的 ui-view”概念和状态中的单独 View )。但我仍然想知道:“如何使用‘ui-view inside ui-view’概念来做到这一点?”
最佳答案
可以在另一个 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”填充它' 对象。
关于angularjs - Angular 在另一个 ui-view 内路由 ui-view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33696165/