【问题标题】：Nested views with angular with ui.router带有角度的嵌套视图与 ui.router
【发布时间】：2016-05-03 22:23:00
【问题描述】：

如何使用 ui.router 在 Angular 中插入登录索引和登录信息？

我需要根据使用的url使用不同的视图，例如当你输入登录并为驱动程序上传这个视图时，这里注入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>'}}

            });

【问题讨论】：

标签： javascript angularjs

【解决方案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>'
    })

【讨论】：

【解决方案2】：

试试这个：

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

如果这可行，那是因为您在“信息”部分拼错了“模板”一词。

【讨论】：

【解决方案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"}
          });

【讨论】：