Question

在Angular 1.5上使用带有lazyload的angular-ui路由器：

我的JS代码如下：

$stateProvider
        .state('app', {
            url: "/",
            views: {
                '@': {
                    templateUrl: 'layout.html',
                    controller: 'AppCtrl'
                },
                'sidebar@app': { templateUrl: 'app/modules/sidebar/views/sidebar.html' },
                'header@app': { templateUrl: 'app/modules/header/views/header.html' },
                'main@app': { templateUrl: 'app/modules/home/views/home.html' },
                'footer@app': { templateUrl: 'app/modules/footer/views/footer.html' }
            },
            resolve: {
                trans: ['RequireTranslations',
                    function(RequireTranslations) {
                        RequireTranslations('general');
                        RequireTranslations('sidebar');
                        RequireTranslations('home');
                        RequireTranslations('footer');
                        RequireTranslations('header');
                    }
                ],
                dep: ['trans', '$ocLazyLoad',
                    function(trans, $ocLazyLoad) {
                        return $ocLazyLoad.load(['ui-bootstrap']).then(
                            function() {
                                return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
                            }
                        );
                    }
                ]
            }
        })
        .state('app.shares', {
            url: "shares",
            views: {
                'main@app': {
                    controller: 'ShareCtrl',
                    templateUrl: "app/modules/shares/views/shares.html",
                },
            },
            resolve: {
                trans: ['RequireTranslations',
                    function(RequireTranslations) {
                        RequireTranslations('shares');
                    }
                ],
                dep: ['trans', '$ocLazyLoad',
                    function(trans, $ocLazyLoad) {
                        return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
                    }
                ]
            }
        })
        .state('app.portfolio', {
            url: "portfolio",
            views: {
                'main@app': {
                    controller: 'PortfCtrl',
                    templateUrl: "app/modules/portfolio/views/portfolio.html",
                },
                'tabs@app.portfolio': {
                    controller: 'TitleCtrl',
                    templateUrl: "app/modules/titlegraph/views/title.html",
                }
            },
            resolve: {
                trans: ['RequireTranslations',
                    function(RequireTranslations) {
                        RequireTranslations('portfolio');
                    }
                ],
                dep: ['trans', '$ocLazyLoad',
                    function(trans, $ocLazyLoad) {
                        return $ocLazyLoad.load(['app/modules/portfolio/controllers/PortfCtrl.js', 'app/modules/titlegraph/controllers/TitleCtrl.js']);
                    }
                ]
            }
        })

的index.html：

<body id="mainbody" lang="{{currentLanguage}}">
    <div class="text-center preloader" ng-show="loader">
        <span>Loading...</span>
    </div>
    <!--     <div class="text-center preloader" ng-show="transLoader">
        <span>Initialize language...</span>
    </div> -->
    <div ui-view></div>
    <!-- end #container -->
    <!-- <script id="ft-script" src="assets/js/dist.js"></script> -->

</body>

的layout.html：

<div id="wrapper" ng-class="wrapper" class="wrapper">
    <div ui-view="sidebar"></div>
    <div id="page-content-wrapper">
        <div ui-view="header"></div>
        <!-- main app content ui-view include -->
        <div ui-view="main"></div>

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

    </div>
</div>

portfolio.html：

<div class="portfolio">
    <uib-tabset>
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <h2>{{'pwc.st.portfolio.title' | translate}}</h2>
                    <button ui-sref="app.shares" class="orange-btn prt-btn">{{'pwc.st.portfolio.btn' | translate}}</button>
                </div>
                <div class="col-xs-6">
                    <!-- {{'pwc.st.portfolio.tab.title1' | translate}} -->

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

                </div>
            </div>
        </div>
    </uib-tabset>
</div>

问题是我无法获得标题html，在portfolio.html内部渲染。我可能做错了什么？

寻求帮助。

Angular-ui路由器嵌套子子状态

0 个答案: