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

Question

如何在登录时使用ui.router在angular？

中插入登录索引和信息

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

的index.html

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

的login.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>'}}

            });

Answer 1

您需要使用Nested States & Views，如下所示：

$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>'
    })

Answer 2

试试这个：

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

如果这样有效，那么因为你拼错了单词＆＃34; template＆＃34;在＆＃39;信息＆＃39;部分。

Answer 3

这是我的解决方案，主要是使用的布局和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"}
          });