尝试在同一视图中渲染两个模板(UI路由器) [英] Try to render two templates in same View (Ui-Router)

问题描述

我正在尝试使用两个不同的ui-view在同一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'
      }
    }
})

我已经编辑了您的小插曲，以说明我的意思- http://plnkr.co/edit/V0lF78MZhrOnwXF7F6Ih?p =预览

I'm trying to render two templates at the same time in same View using two differents ui-view. I'm probably missing something but I don't know what. Can I get some help ?

My 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>

Full Code

解决方案

I'm not quite sure what you need to achieve, but I guess that you should put both your views into the same state and work on within it

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

I've edited your plunk to illustrate what I mean - http://plnkr.co/edit/V0lF78MZhrOnwXF7F6Ih?p=preview

这篇关于尝试在同一视图中渲染两个模板(UI路由器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！