Вложенные представления углового UI-маршрутизатора не отображаются?

Question

Вложенные представления углового UI-маршрутизатора не отображаются?

0

Я пытаюсь изменить свой проект на пользовательский угловой ui-router, но он не может работать, мнения не могут отображаться, кто может мне помочь, спасибо. Поток - это мой файл:

app.js, index.html, home.html, leftTree.html, topBar.html, ihome.html, footer.html

angular.module('agentApp', ['ngCookies', 'ui.router', 'agentApp.controllers', 'agentApp.directives', 'agentapp.filters', 'agentApp.services'])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('index', {      
      url: '/',
      templateUrl: 'tpls/home.html'
    })
    .state('index.home', {
      url:'/home',
      views: {
        "leftTree": {
          templateUrl: "tpls/leftTree.html"
        },
        "topBar": {
          templateUrl: "tpls/topBar.html"
        },
        "ihome": {
          template: "tpls/ihome.html"
        },
        "footer": {
          templateUrl: "tpls/footer.html"
        }
      }
    })
}])

index.html

<!DOCTYPE html>
<html lang="en" ng-app="agentApp" ng-controller="validUserCtrl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="title">Document</title>
<link href="/bootstrap.min.css" rel="stylesheet" />
<link href="/font-awesome.css" rel="stylesheet" />
<!-- Morris -->
<link href="/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Gritter
    <link href="/jquery.gritter.css" rel="stylesheet">
-->
<!-- Toastr style -->
<link href="/toastr.min.css" rel="stylesheet" />
<link href="/animate.css" rel="stylesheet" />
<link href="/style.css" rel="stylesheet" />
</head>
<body ng-controller="homeCtrl" ng-cloak>
	<div ui-view></div>
</body>
</html>

home.html

<div id="wrapper">
  <nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
      <div ui-view="leftTree"></div>
    </div>
  </nav>

  <div id="page-wrapper" class="gray-bg">
    <div class="row border-bottom">
      <div ui-view="topBar"></div>
  
    </div>
  
    <div class="wrapper wrapper-content" ng-cloak>
  
      <div ui-view="ihome"></div>
  
      <div class="footer">
        <div ui-view="footer"></div>
      </div>
    </div>
  </div>
</div>

leftTree.html

<div class="siderbar-collapse">
    <ul class="nav" id="side-menu">
        <li>demo menu 1</li>
        <li>demo menu 2</li>
        <li>demo menu 3</li>
        <li>demo menu 4</li>
        <li>demo menu 5</li>
    </ul>
</div>

topBar.html

<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a href="loginManager!logout.action">
                <i class="fa fa-sign-out"></i>{{ 'Logout' | lan }}
            </a>
    </div>
</nav>

ihome.html

<div>I am main home page</div>

footer.html

<footer>
    <p> copyfight &copy; myapp
  </footer>

Файл прикрепления - я хочу, чтобы содержимое отображало место, введя описание изображения здесь

Thomaspha 21 июль 2016, в 12:13

Источник

0

В чем проблема в этом коде?
Rajkumar R 21 июль 2016, в 10:04
0

Шаблон представлений не отображается,
Thomaspha 21 июль 2016, в 10:46

Теги:

javascript

angularjs

angular-ui-router

2 ответа

0

Поскольку uiViews iHome, нижний колонтитул, topBar и leftTree фактически находятся внутри состояния index.home, вам необходимо указать такие виды:

     views: {
    "[email protected]": {
      templateUrl: "tpls/leftTree.html"
    },
    "[email protected]": {
      templateUrl: "tpls/topBar.html"
    },
    "[email protected]": {
      template: "tpls/ihome.html"
    },
    "[email protected]": {
      templateUrl: "tpls/footer.html"
    }

Без части "@index.home" ui-router пытается искать именованные представления в родительском состоянии, состояние индекса в index.html, которое содержит одно неназванное представление для отображения только вашего домашнего состояния.

Olli 21 июль 2016, в 08:10

0

Я сделал, как вы комментируете, но это не сработало.
Thomaspha 21 июль 2016, в 11:06

Ещё вопросы

Шаблон представлений не отображается,
Я сделал, как вы комментируете, но это не сработало.

krutkowski86 · Accepted Answer · 2016-07-21T08-04-00.000Z

Я сделал вам jsfiddle с аналогичным определением маршрута. http://jsfiddle.net/vzmddcdL/

Сделайте index регистром абстрактное.
$urlRouterProvider.otherwise должен указывать ("/home");
index.home не нуждается в / в url - index / url / home /home url определения, потому что ребенок состояние index, который уже определяет / в url... так / + home= /home

.state('index.home', { url:'home', views: {

Спасибо, все работает так, как ты отвечаешь.