Question

我尝试将我的项目修改为用户角度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="css/bootstrap.min.css" rel="stylesheet" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<!-- Morris -->
<link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Gritter
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
-->
<!-- Toastr style -->
<link href="css/plugins/toastr/toastr.min.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/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>

附件文件是我想要的内容显示位置 enter image description here

Answer 1

我已经让你了解类似的路线定义。 http://jsfiddle.net/vzmddcdL/

让index说明摘要。
$urlRouterProvider.otherwise应指向("/home");
index.home在/定义中不需要url因为index的子状态已定义/ } url ... / + home = /home

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

Answer 2

由于uiViews iHome，footer，topBar和leftTree实际上在index.home状态，你需要指定这样的视图：

     views: {
    "leftTree@index.home": {
      templateUrl: "tpls/leftTree.html"
    },
    "topBar@index.home": {
      templateUrl: "tpls/topBar.html"
    },
    "ihome@index.home": {
      template: "tpls/ihome.html"
    },
    "footer@index.home": {
      templateUrl: "tpls/footer.html"
    }

如果没有“@ index.home”部分，ui-router会尝试查找父状态的命名视图，index.html中的索引状态包含一个未命名的视图，仅显示您的home状态。

角度ui-router嵌套视图无法显示？

2 个答案: