在 Angular UI 路由器中嵌套 ui-views



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;

不能在一个级别(一个状态(上有"嵌套"的ui视图。因为ui视图内容被所提供的模板替换
要使mainPanel位于core内部,它应该是嵌套状态模板的一部分。

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

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

最新更新