尝试在同一视图(UI-Router)中渲染两个模板



我正在尝试使用两个不同的UI-View在同一视图中同时渲染两个模板。我可能缺少一些东西,但我不知道。我可以得到一些帮助吗?

我的app.js

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider) {
  //$urlRouterProvider.otherwise('/home');
  var People = {
    name: 'People',
    url: '/People',
    views: {
      'PeopleView': {
        templateUrl: 'People.html'
      }
    }
  }
  var Company = {
    name: 'Company',
    url: '/Company',
    views: {
      'CompanyView': {
        templateUrl: 'Company.html'
      }
    }
  }
  $stateProvider.state(People);
  $stateProvider.state(Company);
});

html

<div class="container">
  <fieldset>
    <div class="row">
      <legend>Content</legend>
      <div ui-view="PeopleView" class="col col-md-4"></div>
      <div ui-view="CompanyView" class="col col-md-4"></div>
    </div>
  </fieldset>
</div>

完整代码

我不太确定您需要实现什么,但是我想您应该将两个视图都放在同一状态下,并在其中进行工作

$stateProvider.state('mainState', {
    views: {
      'CompanyView': {
        templateUrl: 'Company.html'
      },
      'PeopleView': {
        templateUrl: 'People.html'
      }
    }
})

我已经编辑了您的plunk来说明我的意思-http://plnkr.co/edit/v0lf78mzhronwxf7f6ih?p=peview

最新更新