角UI路由器多視圖

我是新來使用角UI路由器，我擁有的index.html和JavaScript這樣的：角UI路由器多視圖

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: { 
 
     '[email protected]': { 
 
     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"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-md-12 column text-center bg-primary"> 
 
      Title 
 
    \t \t </div> 
 
    \t </div> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-md-3 column bg-danger"> 
 
      <div ui-view="menu"></div> 
 
    \t \t </div> 
 
    \t \t <div class="col-md-9 column bg-info"> 
 
     <div ui-view="content"> 
 

 
     </div> 
 
    \t \t </div> 
 
    \t </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」不能加載，我哪裏錯了？

來源

2017-03-18 felix1982

更改子狀態在子路由部分提及的URL。 Ui路由器引擎將基於狀態層次結構來處理URL形成。

然後讓你讓你的content命名視圖relative由你命名視圖後加入@，既然你想改變命名視圖這是index（父）狀態的部分。

.state('index.content1', { 
    url: "/content1", 
    views: { 
    '[email protected]': { 
     templateUrl: 'views/content1.html' 
    } 
    } 
}).state('index.content2', { 
    url: '/content2', 
    views: { 
    '[email protected]': { 
     templateUrl: 'views/content2.html' 
    } 
    } 
})

Plunker Demo

來源

2017-03-18 07:32:55

我變了，但它仍然無法正常工作，是否有任何o其他錯誤？ – felix1982

@ felix1982結帳我的編輯..我也包括演示plunker以及。 –

謝謝，它的工作 – felix1982

角UI路由器多視圖

回答

相關問題