Question

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

ui-directive部分需要col s9：

<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

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

1 个答案: