繁体   English   中英

在index.html中设置多个ui视图时不显示

No display when setting up multiple ui-view in index.html

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试实现ui-routerMulti-Named-Views Wiki页面中所示ui-router 示例如下:

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates and/or controllers ... },
      'tabledata': {},
      'graph': {},
    }
  })

使用如下所示的当前设置,路由无法正常工作。 不知道我在做什么错吗?

我当前的index.html看起来像这样:

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

然后我的app.js:

app.constant("AccessLevels", {
    anon: 0,
    user: 1
});

    app.config(["$stateProvider", "$urlRouterProvider", "AccessLevels", function ($stateProvider, $urlRouterProvider, AccessLevels) {

        /* ANONYMOUS USERS */
        $stateProvider
            .state('anon', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.anon
                }
            })
            .state('anon.login', {
                url: '/login',
                views: { 
                    anonymous: {
                        templateUrl: 'Client/scripts/app/partials/account/login.html',
                        controller: 'loginCtrl'
                    }
                }
            })
            .state('anon.register', {
                views: {
                    anonymous: {
                        url: '/register',
                        templateUrl: 'Client/scripts/app/partials/account/registration.html',
                        controller: 'registerCtrl'
                    }
                }
            });

        /* AUTHENTICATED USERS */
        $stateProvider
            .state('user', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.user
                }
            })
            .state('user.home', {
                views: {
                    'home': {
                        url: '/home',
                        templateUrl: 'Client/scripts/app/partials/home/dashboard/index.html',
                        controller: 'homeCtrl'
                    }
                }
            })
            .state('user.deliveries', {
                views: {
                    'home_content': {
                        url: '/home/deliveries',
                        templateUrl: 'Client/scripts/app/partials/home/deliveries/deliveries.html',
                        controller: 'deliveryCtrl'
                    }
                }
        });

        $urlRouterProvider.otherwise('/login');
    }]);
1 个回复

通常,如果我们以父级为目标,则只能使用简化的所谓的相对视图目标名称。 那不是你的情况,因为

.state('anon', {
    abstract: true,
    template: '<ui-view/>', // parent contains unnamed view
    ... 
})
.state('anon.login', {
    url: '/login',
    views: { 
        anonymous: { // this view is not in parent

所以我们必须使用绝对命名

.state('anon.login', {
    url: '/login',
    views: { 
        'anonymous@': { // no we target root
        // realtive
        '' : { // here we target unnamed parent view
        // absolute
        '@anon' : { //the same as the line above

指向文档的链接:

视图名称-相对名称与绝对名称

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

4 ui-router中的多个ui-view html文件

是否可以使用ui-view使用2个或更多html文件制作内容? 我需要它是这样的: 我已经尝试在plinker上做一些工作,但看起来我显然不会理解概念。 我已经阅读了一个嵌套的ui-vew教程,但是他们只需要制作一个index.html并在那里放置多个ui-view,但我需要多个.ht ...

5 插板新闻ui-view无法显示html文件

我正在从https://thinkster.io/tutorials/mean-stack做一个名为插板新闻的教程。 我已经完成了教程,系统工作正常。 但是,我认为如果你正在做一个大项目,在一个文件中做一个内联模板并不是一个好习惯。 所以我试图将这些模板分成文件(.html)。 不幸的是 ...

6 角度的多个ui视图

我有一个ui视图,它根据状态替换整个页面,该视图中的一个视图是主页,它由一个左导航和一个右容器组成。如何使用已经使用过的ui来实现此主页-在父视图中。 ...

7 angularjs中的多个ui视图

我正在使用ui-route在我的weba应用程序中实现多个ui-view,但是一次只有一个ui-view加载其他用户无法访问它们。 这是我尝试实现的示例代码 路线(app.js) 现在,我有两个视图,一个没有名称,另一个有“用户仪表板”。 有两个名为index和user ...

8 索引呈现索引页面中的ui视图

我一直在寻找这个问题,也许我只是在寻找正确的问题。 我的index.html页面中有两个ui-view元素。 第一个ui视图呈现包括head标签和所有js文件而不是模板的index.html,我不知道为什么。 在index.html页面中,我有两个ui视图。 我有这样设置的 ...

10 用CSS3 z-index堆叠angular-ui-router ui-view

我想使用CSS3 z-index属性和angular-ui-router堆叠2个ui视图。 我从此链接中汲取了灵感,这是我的实现: 的index.html index.css 由于ui-view按添加的顺序堆叠(这不是我想要的配置),因此我定义了另外两个html文件及其对 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM