Question

如果我有index.html：

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

然后在该主视图中，我使用以下内容呈现frame.html：

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

在我的app.js中，我一直试图让ui-view内部的frame.html最内在，以呈现另一个html模板。我可以在home视图中呈现内容，但home_content内没有任何内容呈现。

我的app.js ui-router代码

    $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

有a working plunker

我希望，您希望在子项中定位父项的未命名视图，因此视图应该像这样定义：

$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，它重新定义父抽象状态，如下所示：

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

检查文档

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循viewname@statename方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

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

Answer 2

您的孩子.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 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呈现但具有模板的子视图不呈现

3 个答案:

View Names - Relative vs. Absolute Names