Question

在我的应用程序中，我的根状态名为＆＃34; app＆＃34;：

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

及其子女＆＃34; app.pages＆＃34;

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

和大孩子＆＃34; app.pages.dashboard＆＃34;

.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',
            ]);
        }]
    }
})

现在app加载一个html视图，在该视图中是嵌套视图，当我导航到＆＃34; app.pages＆＃34;时，应该加载这些视图。

现在到目前为止一切正常，但是现在我想在＆＃34; app.pages＆＃34;的内容主体中加载一个页面，我已经尝试了几次但是视图永远不会得到加载：

这是我的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': {

嵌套视图和状态未显示

1 个答案: