如何使用角度UI路由器顯示側邊欄內容？

Question

在主頁上，我具有側邊欄和Main內容，當我單擊側邊欄項目時，我想在具有Main內容的右側顯示側邊欄內容。 我想在所有頁面上固定側欄，僅主要內容應更改，並根據狀態呈現數據。 我如何使用angularjs路由完成該任務？

home.html的

<div class="row">
    <div class="col s3">
        <div>
            <ul>
                <li ui-sref="desktop"> Desktop</li>
                <li ui-sref="laptop"> Laptops</li>
                <li ui-sref="monitor"> Monitors</li>
            </ul>
        </div>
    </div>
    <div class="col s9">
        <h1>Main Content</h1>
    </div>
</div>

routes.js

angular.module('computerTrading').config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/home');

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'MainController'
    })
    .state('contact',{
      url:'/contact',
      templateUrl:'views/contact.html',
      controller:'ContactController'
    }).
    state('inventory',{
    url:'/inventory',
    templateUrl:'views/inventory.html',
    controller:'InventoryController'
    }).
    state('laptop',{
      templateUrl:'views/laptop.html',
      controller:'LaptopController'
    })
    .
    state('desktop',{
      templateUrl:'views/desktop.html',
      controller:'DesktopController'
    })
    .
    state('monitor',{
      templateUrl:'views/monitor.html',
      controller:'MonitorController'
    });
});

Answer 1

您的col s9部分將需要一個ui-directive ：

<div class="row">
    <div class="col s3">
        <div>
            <ul>
                <li ui-sref="desktop"> Desktop</li>
                <li ui-sref="laptop"> Laptops</li>
                <li ui-sref="monitor"> Monitors</li>
            </ul>
        </div>
    </div>
    <div class="col s9">
        <h1>Main Content</h1>
        <div ui-view></div><!--you need this-->
    </div>
</div>

這是一個工作的plnkr