Question

概念概述：

我们在index html上有两个标签。我们在那里路由这些标签：

<div ui-view></div>

在第二个标签上，我们有一个选择器，在另一个ui视图中切换标签的内容，如下所示：

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

其中vm.currentView是路由状态的名称（＆＃39; book1＆＃39;等）。

 .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＆＃39;概念和状态中的单独视图中的排除＆u-view）。但我仍然想知道：＆＃34;如何使用ui-view＆＃39; ui-view中的ui-view？概念＆＃34;

Here's a Plunker Example

Answer 1

正如我之前解释的那样，我只想在另一个ui-view＆＃39;内部进行观看，但这似乎是不可能的。我找到了两种解决方法＆＃34; bug＆＃34;（？）。

第一种方式：在另一个ui-view＆＃39;内排除＆u-view。并使用＆＃39; ng-include＆＃39;

最简单的变体，代码更改最少。如您所见here，我已取代

 <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＆＃39;内部正式保存＆ui-view。并按州分开观点

正如你所看到的here，正式地我在ui-view＆＃39;中保存了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);
        }

这是最奇怪和最困难的方式，但最终我们得到了更清晰的代码。

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

1 个答案: