如何在一個狀態下使用UI路由器顯示2個視圖

Question

.state('app', { 
url: "/app", 
cached:false, 
abstract: true, 
templateUrl: "views/menu.html", 
controller : 'AuthController' 
}) 

.state('app.home', { 
url: "/home", 
templateUrl: "views/home.html", 
controller : 'DashBoardController', 
}) 

這裏的事情是當我通過state.go（）訪問app.home時。我只看到menu.html，home.html沒有顯示，並且在我的日誌中沒有錯誤。我怎樣才能使menu.html和home.html顯示？謝謝

Answer 1

You will have to use multiple named views

示例代碼段：

定義路線：

 
.state('app', { 
    url: '', 
    views: { 
     'menu@app': { 
      templateUrl: 'views/menu.html', 
      controller: 'MenuController' 
     }, 
     '@': { 
      templateUrl: 'views/main.html', 
      controller: 'MainController' 
     } 
    }, 
    abstract: true 
}); 

.state('app.home', { 
    url: '/home', 
    templateUrl: 'views/home.html', 
    controller : 'DashBoardController' 
}); 

main.html中：

<div ui-view="menu"></div> 

<div ui-view></div>