Angular UI-Router，Parent ui-view 呈现但带模板的子视图不呈现

Question

如果我有 index.html 并且：

<body> <ui-view="home"></home> </body>

然后在主视图中，我渲染 frame.html，其中包含以下内容：

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

在我的 app.js 中，我一直试图在 frame.html 中获取最内在的 ui-view 来渲染另一个 html 模板。我能够在 home 视图中呈现内容，但在 home_content.

中没有任何内容呈现

我的app.jsui-路由器代码

    $stateProvider
        .state('user', {
            abstract: true,
            template: '<ui-view/>',
            data: {
                access: AccessLevels.user
            }
        })

        .state('user.home', {
            url: '/home',
            views: {
                'home@': {
                    templateUrl: 'app/partials/home/frame.html',
                    controller: 'homeCtrl'
                },
                'home_content@home': {
                    templateUrl: 'app/partials/home/dashboard/index.html',
                    controller: 'dashboardCtrl'
                }
            }
        });

看来我可能完全错了，不确定上面的方法是否正确。

Answer 1

看起来你的 child .state 有错误的代码应该是 'home@home_content' 而不是 'home_content@home'

    .state('user.home', {
        url: '/home',
        views: {
            '': {
                templateUrl: 'app/partials/home/frame.html',
                controller: 'homeCtrl'
            },
            'home@home_content': {
                templateUrl: 'app/partials/home/dashboard/index.html',
                controller: 'dashboardCtrl'
            }
        }
    });

Answer 2

有a working plunker

我预计，您想要在 child 中定位您的 parent 的未命名视图，因此视图应该这样定义：

$stateProvider
    // here we define parent
    .state('user', {
        abstract: true,
        // parent has UNNAMED view
        template: '<ui-view/>', // this will be injected into index.html
        ...                     // ui-view=""
    })
    // child will partilly target parent
    // and also itself
    .state('user.home', {
        url: '/home',
        views: {
            // here we target parent UNNAMED view
            '': {
                ...
            },
            // here we target current state
            // so we should use state name
            'home_content@user.home': {
                ...
            }
        }
    });

我们可以使用 '@home' : {} （参见下面的文档）.

而不是 '' : { }

以防万一（如下面的评论中所述）我们 index.html 的目标名为 home:

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

我们可以使用 this plunker，它重新定义 parent 抽象状态，如下所示：

$stateProvider
    .state('user', {
        abstract: true,
        data: {
            ...
        },
        views : {
          'home' : {
            template: '<div ui-view=""></div>',
          }
        }
    })

查看文档

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

Answer 3

您正在使您的状态配置变得复杂。只需将您的代码更改为如下所示：

$stateProvider.state('user', {
    abstract : true,
    template : '<ui-view/>',
    data : {
        access : AccessLevels.user
    }
})

.state('user.home', {
    url : '/home',
    views : {
        'home' : {
            templateUrl : 'app/partials/home/frame.html',
            controller : 'homeCtrl'
        },
        'home_content' : {
            templateUrl : 'app/partials/home/dashboard/index.html',
            controller : 'dashboardCtrl'
        }
    }
});

您实际上没有正确使用 @，这是可选的。这应该有效，除非你有正确的视图路径。

Angular UI-Router，Parent ui-view 呈现但带模板的子视图不呈现

Angular UI-Router, Parent ui-view renders but child view with templates do not

angularjs

angular-ui-router

View Names - Relative vs. Absolute Names