Question

非常基本的例子，但不起作用。我做错了什么？

<body ng-app="App"></body>

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

<script>

    var App = angular.module('App', ['ui.router']);

    App.config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/users');

        $stateProvider
            .state('users', {
                url: '/users',
                views: {
                    'navbar':  {template: '<p>Navigation</p>'},
                    'sidebar': {template: '<a href="#users/123">Link</a>'}
                }
            })
            .state('users.item', {
                url: '/:id',
                views: {
                    'content': {template: 'User info'}
                }
            });

    });

</script>

点击链接时 - 应用变为“users.item”状态，但不会呈现views.content

Answer 1

您需要在模板中嵌套内容视图：

'sidebar': { template: '<a href="#users/123">Link</a><div ui-view="content"></div>' }

而不是将它放在体内。

嵌套视图未呈现

1 个答案: