如何使用角度 ui-router 显示侧边栏内容？答案

【问题标题】：How to display sidebar content using angular ui-router?如何使用角度 ui-router 显示侧边栏内容？
【发布时间】：2017-01-24 02:49:20
【问题描述】：

在主页上，我有侧边栏和主要内容，当我单击侧边栏项目时，我想将侧边栏内容显示到我有主要内容的右侧。我想在所有页面上固定侧边栏，只有主要内容应该根据状态更改和呈现数据。我如何使用 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'
    });
});

【问题讨论】：

你可以利用named view的ui-router
我认为您已经在当前代码中实现了这一点。但是您在主要内容中忘记了ui-view 指令
@CozyAzure 我已经在index.html 中使用了ui-view，我还需要在home.html 中再次使用它吗？
@PankajParkar 你能提供一些我如何实现命名视图的例子吗？

标签： javascript html angularjs angular-ui-router

【解决方案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>

这是working plnkr

【讨论】：