4

嵌套状态有一些麻烦......

我有一个应用程序，它有几个页面（表示为页面模板）。所以，我真的需要使用嵌套状态。阅读文档和示例是无用的......

所以代码在这里。

这是我的状态配置：

myApplication.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('state1', {
            url: '/state1',
            views: {
                'content': {
                    templateUrl: /* path to template */
                },
                'menu': {
                    templateUrl: /* path to template */
                },
                'overlay': {
                    templateUrl: /* path to template */
                }
            }
        })
        .state('layer', {
            url: '/layer',
            views: {
                'content': {
                    templateUrl: /* path to template */
                },
                'menu': {
                    templateUrl: /* path to template */
                }
            }       
        })
        .state('layer.message', {
            url: '/message',
            views: {
                'overlay': {
                    templateUrl: /* path to template */
                }
            }
        });
});

这是我的 HTML 视图：

<html>
    <body ng-app="myApplication" ng-controller="AppCtrl">
        <div id="wrapper">
            <!-- Here is some not interesting stuff -->
        </div>

        <!-- But here is the most exciting things -->
        <div id = "overlay" ui-view="overlay"></div>
    </body>
</html>

如您所见，我在此子状态中有一个状态“层”和一个子状态“layer.message”，我只想加载一个额外的模板，该模板被调用overlay并将其包装在div标签中，例如“state1”。但是我所有的尝试都失败了。firebug 调试工具显示模板是通过 GET 查询加载的。但它不会出现在 HTML 模型中，因此不会呈现。在“state1”中，一切正常。我相信我对嵌套状态做错了什么......有什么建议吗？

4

1 回答 1

14

您的嵌套layer.message状态需要使用“@”后缀显式处理处于较高状态的视图，即：

.state('layer.message', {
        url: '/message',
        views: {
            'overlay@': {
                templateUrl: /* path to template */
            }
        }
    })

这表示“使用模板在未命名（根）状态下填充称为“覆盖”的视图”。您还可以更明确并指定overlay@layer.

有关更多详细信息，请参阅https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names。

于 2013-10-25T09:13:02.250 回答