个人中心
gpt4 book ai didi

javascript - 在 AngularJS 和 ui-router 中遇到嵌套状态的问题

转载 作者：搜寻专家 更新时间：2023-11-01 04:50:30 24 4
gpt4 key购买 nike

嵌套状态有一些问题...

我有一个有几个页面的应用程序(表示为页面模板)。所以，我真的需要使用嵌套状态。读书documentation和例子是无用的...

所以代码在这里。

这是我的状态配置:

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 View :

<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”和一个子状态“layer.message”，我只想加载一个名为 overlay 的额外模板并将其包装在 div 标签，如'state1'。但是我所有的尝试都失败了。 firebug 调试工具显示模板是通过 GET 查询加载的。但它不会出现在 HTML 模型中，因此不会呈现。在“状态 1”中，一切正常。我相信我在 nasted 状态上做错了......有什么建议吗？

最佳答案

您的嵌套 layer.message 状态需要使用“@”后缀显式解决更高状态中的 View ，即:

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

这表示“使用模板在未命名(根)状态下填充名为“覆盖”的 View ”。您也可以更明确地指定 overlay@layer。

参见 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names了解更多详情。

关于javascript - 在 AngularJS 和 ui-router 中遇到嵌套状态的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19584768/

24 4 0
文章推荐： javascript - google places api autocomplete - 添加点击事件
文章推荐： javascript - 基于容器设置codemirror实例的焦点
文章推荐： javascript - 从 javascript 函数打开下拉列表
文章推荐： ios - 无法解锁钥匙串(keychain)
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com