如何使用角度 ui 路由器显示侧边栏内容

Question

在主页上，我有侧边栏和主要内容，当我单击侧边栏项目时，我想在有主要内容的右侧显示侧边栏内容。我希望所有页面上的侧边栏都固定，只有主要内容应该根据状态更改和呈现数据。如何使用 angularjs 路由完成该任务？

首页.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>

路线.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