angular-ui-router多视图

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视图，因为您想要更改命名视图，这是index （父）状态的一部分。

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

Plunker演示