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

在主頁上我有側邊欄和主要內容，當我點擊側邊欄項目時，我想將側邊欄內容顯示在右側，我有主要內容。我想在所有頁面上修復側邊欄，只有主要內容應該根據狀態進行更改和呈現數據。我如何使用angularjs路由來實現這個任務？如何使用角度ui路由器顯示側邊欄內容？

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' 
    }); 
});

來源

2017-01-24 hussain

你可以利用'ui-router'的命名視圖' –

我認爲你已經在你當前的代碼中實現了。但是你忘記了你的主要內容中的'ui-view'指令 – CozyAzure

@CozyAzure我已經在'index.html'中有'ui-view'了，是否需要在'home.html'中再次使用它？ – hussain

您將需要一個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

來源

2017-01-24 15:57:24 CozyAzure

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

回答

相關問題