在 Angular UI Router 中嵌套 ui-view答案

【问题标题】：Nesting ui-view's in Angular UI Router在 Angular UI Router 中嵌套 ui-view
【发布时间】：2015-07-30 03:20:03
【问题描述】：

main.jade（相关部分）

div(ui-view="core")

partials/dashboard.jade

#dashboard(ng-controller="dashboardController")
    #main-panel(ui-view="mainPanel")
    #side-panel

    nav#top-nav

routes.js

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

    // loads url from the index
    $urlRouterProvider.otherwise('/');

    $locationProvider.html5Mode(true);

    $stateProvider
        .state('splash', {

        })
        .state('dashboard', {
            abstract: true,
            url:'/dashboard',
            views: {
                'core' : {
                    templateUrl: '/partials/dashboard'
                },
                'mainPanel' : {
                    templateUrl: '/partials/calendar'
                }
            }
        })

}]);

有没有办法渲染 ui-view="core" 以及 core 内部的 ui-view="mainPanel"？

作为参考，这是我配置部分以使用玉的方式

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
    res.render('main', { 
        title: 'Express' 
    });
});

router.get('/partials/:name', function (req, res) { 
    var name = req.params.name;
    res.render('partials/' + name);
});

module.exports = router;

【问题讨论】：

标签： angularjs angular-ui-router pug

【解决方案1】：

您不能在一个级别（一种状态）上拥有“嵌套”的 ui 视图。因为 ui-view 内容被提供的模板替换。
要使mainPanel 在core 内部，它应该是嵌套状态模板的一部分。

.state('dashboard.main', {
    url:'/main',
    views: { mainPanel : ... }
}

并且dashboard的模板应该包含ui-view="mainPanel"

【讨论】：