Question

我是新手使用angular-ui-router，我有一个index.html和javascript这样：

var mainApp = angular.module('mainApp',['ui.router']);

mainApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider',
  function($stateProvider, $urlRouterProvider,$httpProvider){
    $urlRouterProvider.when('','/index');
  $stateProvider.state('index',{
    url:"/index",
    views:{
      'menu':{
        templateUrl:'views/menu.html'
      },
      'content':{
        templateUrl:'views/content1.html'
      }
    }
  }).state('index.content1',{
    url:"index/content1",
    views: {
      'content@index': {
        templateUrl: 'views/content1.html'
      }}
  }) .state('index.content2',{
    url: 'index/content2',
    views: {
      'content': {
        templateUrl: 'views/content2.html'
      }
    }
  })
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body ng-app="mainApp">
    <div class="container">
    	<div class="row">
    		<div class="col-md-12 column text-center bg-primary">
            Title
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-md-3 column bg-danger">
          <div ui-view="menu"></div>
    		</div>
    		<div class="col-md-9 column bg-info">
         <div ui-view="content">

         </div>
    		</div>
    	</div>
    </div>
  </body>
</html>

menu.html

<ul>
    <li><a ui-sref="index.content1"  ui-sref-active="active">menu1</a></li>
    <li><a ui-sref="index.content2"  ui-sref-active="active">menu2</a></li>
</ul>

但是当我在menu.html中点击“menu1”或“menu2”链接时，“content1”或“content2”无法加载，我哪里出错？

Answer 1

更改儿童路线部分提及的儿童状态URL。 Ui-router引擎将根据状态层次结构处理URL的形成。

然后通过在命名视图后面添加content，将您的relative命名视图设为@，因为您想要更改{{1}部分的命名视图（父）状态。

index

Plunker Demo

angular-ui-router多视图

1 个答案: