嵌套视图和状态未显示

Question

在我的应用程序中，根状态名为 "app":

.state('app', {
    abstract: true,
    views: {
        'app': {
            templateUrl: 'prebuilt/views/pages/index.html',
            controller: 'MainController'
        }
    }
})

及其child"app.pages"

.state('app.pages', {
    abstract: true,
    views: {
        'custom@app': {
            templateUrl: 'prebuilt/views/templates/custom-styles.html'
        },
        'header@app': {
            templateUrl: 'prebuilt/views/layout/header.html'
        },
        'topBar@app': {
            templateUrl: 'prebuilt/views/layout/topbar.html'
        },
        'sideBar@app': {
            templateUrl: 'prebuilt/views/layout/sidebar.html'
        },
        'infoBar@app': {
            templateUrl: 'prebuilt/views/layout/infobar.html'
        },
        'contentSide@app': {
            templateUrl: 'prebuilt/views/layout/contentside.html'
        }
    }
})

盛大child"app.pages.dashboard"

.state('app.pages.dashboard', {
    url: '/',
    views: {
        'content@app.pages': {
            templateUrl: 'prebuilt/views/index.html',
            controller: 'DashboardController'
        }
    },
    resolve: {
        loadCalendar: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load([
                'prebuilt/bower_components/fullcalendar/fullcalendar.js',
            ]);
        }]
    }
})

现在应用程序加载了一个 html 视图，该视图内部是嵌套视图，当我导航到 "app.pages".

时会加载 are/should

到目前为止，一切正常，但是现在我想在 "app.pages" 的内容主体中加载一个页面，我已经尝试了几次，但从未加载过视图：

这是我的app.php的简化版本：

<html>
  <head></head>
  <body>
   <div ui-view="app"></div>
  </body>
</html>

这是我的index.html的简化版本：

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

<nav ui-view="topBar"></nav>

<div id="wrapper">
    <div>
        <di ui-view="sideBar">

        </div>
        <div>
            <div>
                <div>
                    <div class="col-md-9" ui-view="content">

                    </div>
                    <div class="col-md-3" ui-view="contentSide">

                    </div>
                </div> <!--wrap -->
            </div>
            <footer>
                <div class="clearfix">
                    <ul class="list-unstyled list-inline pull-left">
                        <li>&copy; 2015</li>
                    </ul>
                    <button><i class="fa fa-angle-up"></i></button>
                </div>
            </footer>
        </div>
    </div>
</div>

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

Answer 1

这里的一个问题是绝对命名不正确：

// NOT correct
.state('app.pages.dashboard', {
    url: '/',
    views: {
        // here is incorrect absolute name
        'content@app.pages': {
            templateUrl: 'prebuilt/views/index.html',
            controller: 'DashboardController'
        }
    },
    ...

因为这是 index.html 的一部分，它是状态 'app'

的一部分

...
<div class="col-md-9" ui-view="content">
...

所以正确的命名只是 '...@app'

.state('app.pages.dashboard', {
    url: '/',
    views: {
        // CORRECT
        'content@app': {

嵌套视图和状态未显示

Nested Views and States Not showing

state

angularjs

angular-ui-router