带有ui.router的带角度的嵌套视图

Nested views with angular with ui.router

本文关键字：嵌套 视图 ui router 带有      更新时间：2023-09-26

如何使用angular中的ui.router在索引中插入登录名并在登录中插入信息？

我需要根据使用的url使用不同的视图，例如，当你输入login并上传驱动程序的这个视图时，这里会注入html，而在其他情况下，视图会显示菜单和侧边栏。

index.html

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

登录.html

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

我尝试过这个，但不起作用，任何人都可以帮助我。

$stateProvider
   .state('login', 
          {url: '/login',
           views: {'principal':{templateUrl: 'app/login/login.html',
                            controller: 'LoginController',
                            controllerAs: 'login'},
          {'info':{templete: '<div>HELLO</div>'}}
            });

您需要使用嵌套状态&视图如下：

$stateProvider
    .state('index', { // www.domain.com/#/
        url: '/',
        template: '<h1>Index view</h1><div ui-view></div>'
    })
    .state('index.login', { // www.domain.com/#/login
        url: '/login'
        template: '<h2>Login view</h2><div ui-view></div>'
    })
    .state('index.login.info', { // www.domain.com/#/login/info
        url: '/info'
        template: '<p>Info view :)<p>'
    })

试试这个：

$stateProvider
   .state('login', 
          {url: '/login',
           views: {'principal':{templateUrl: 'app/login/login.html',
                            controller: 'LoginController',
                            controllerAs: 'login'},
          {'info':{template: '<div>HELLO</div>'}}
});

如果这有效，那是因为你在"信息"部分拼错了单词"模板"。

这是我的解决方案，主要是使用和info@foo是注入内容的位置。谢谢你的回答！

    $stateProvider
          .state('home', {
            url: '/',
            views: {
            'info@home': {
              templateUrl: 'app/main/main.html',
              controller: 'MainController',
              controllerAs: 'main'
            },
             'principal' : {
              templateURL: 'principal.html'}}
          })
          .state('login', {
            url: '/login',
            views: {
             'info@login', {
               templateUrl: 'app/login/login.html',
               controller: 'LoginController',
               controllerAs: 'login'
            },
            'principal': "login.html"}
          });
相关文章：