角度 UI-路由器 多个视图



我是使用angular-ui-router的新手,我有一个索引.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>

菜单.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>

但是当我在菜单.html中点击"menu1"或"menu2"链接时,"content1"或"content2"没有加载,我哪里出错了?

更改要在子路由部分提及的子状态 URL。 Ui 路由器引擎将负责基于状态层次结构的 URL 形成。

然后通过在命名视图后添加@来使content命名视图成为relative,因为您想更改命名视图,这是index(父(状态的一部分。

.state('index.content1', {
  url: "/content1",
  views: {
    'content@': {
      templateUrl: 'views/content1.html'
    }
  }
}).state('index.content2', {
  url: '/content2',
  views: {
    'content@': {
      templateUrl: 'views/content2.html'
    }
  }
})

普伦克演示

最新更新