概念概述:
我们在索引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示例
它可以在另一个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视图。
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'状态中填充'bookDetails'ui-view,或者我们可以说在'books'状态下找到'bookDetails'ui-view并用'views'对象填充它。
正如我之前解释的那样,我只想在另一个ui-view中制作“ui-view”,但这似乎是不可能的。我找到了两种方法来解决这个“错误”(?)。
第一种方式:在另一个ui-view中排除'ui-view'并使用'ng-include'
最简单的变体,代码更改最少。如你所见 这里,我换了
<div ui-view="{{vm.currentView}}"></div>
同
<ng-include src="vm.getTemplateUrl(vm.selectedBook.id)"/>
并添加功能到控制器,即切换模板:
function getTemplateUrl(id) {
switch (id) {
case 0:
return 'tab2-book1.html';
case 1:
return 'tab2-book2.html';
case 2:
return 'tab2-book3.html';
case 3:
return 'tab2-book4.html';
default:
return 'tab2-book4.html';
}
}
第二种方式:正式将'ui-view保存在另一个ui-view'中并将状态分开
正如你所看到的那样 这里,正式我在ui-view中保存'ui-view',但实际上我只是用另一个单独的ui-view完全替换单个ui-view(不能按名称设置第二个ui-view)。
$urlRouterProvider
.when('/tab2', '/tab2/book4');
$stateProvider
.state('tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
})
.state('tab2.book1', {
url: '/book1',
params: {
id: 0
},
templateUrl: 'tab2-book1.html',
controller: 'Tab2Controller',
controllerAs: 'vm'
})
.state('tab2.book2', {
url: '/book2',
params: {
id: 1
},
templateUrl: 'tab2-book2.html',
controller: 'Tab2Controller',
controllerAs: 'vm'
})
.state('tab2.book3', {
url: '/book3',
params: {
id: 2
},
templateUrl: 'tab2-book3.html',
controller: 'Tab2Controller',
controllerAs: 'vm'
})
.state('tab2.book4', {
url: '/book4',
params: {
id: 3
},
templateUrl: 'tab2-book4.html',
controller: 'Tab2Controller',
controllerAs: 'vm'
});
tab2.html的内容是:
<ui-view class="page-container"></ui-view>
当选择器改变时我打电话 vm.changeHandbook(vm.selectedBook) 切换模板:
function changeHandbook(ref) {
$state.go(ref.value);
}
这是最奇怪和最困难的方式,但最终我们得到更清晰的代码。