javascript - 如何以 Angular 加载基本 html View 中的 View ？

Question

我需要在基本 html 文件中加载两个 html 文件。换句话说，我有基本 html 文件，其中有标题和竞争 View 。我需要在标题和竞争 View 中加载不同的 HTML 文件。 这是基本 HTML 文件

<div class="container">

    <div class="row page-header">
        <ui-view name="header"></ui-view>
    </div>

    <ui-view name="content"></ui-view>

    <div class="row">
        <div class="col-xs-12">
            <hr>
            <p class="text-center">Test Come</p>
        </div>
    </div>
</div>

在此 View 中

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

在 header 中我需要加载 header.html 和 <ui-view name="content"></ui-view>在此我需要加载 content.html http://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview 谢谢

Answer 1

您需要根据子状态更新您的状态:

var config = function($stateProvider,$urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
       $stateProvider
       .state('main', {
        url: '/',
        views: {

            // the main template will be placed here (relatively named)
            '': { templateUrl: 'base.html' },


            // the child views will be defined here (absolutely named)
            'content@main': { template: 'contend.html' },

            // for column two, we'll define a separate controller 
            'header@main': { 
                templateUrl: 'header.html',

            }
        }

    });
};