你可以和原來的admin.html比較一下，我把class為x-sidemenu的div元素內(nèi)的item模板，用UI Bootstrap的accordion和accordion-group重寫了一下。

accordion定義一個(gè)手風(fēng)琴菜單區(qū)域，close-others屬性可以指定本區(qū)域內(nèi)的菜單組的展開是否互斥，值為true時(shí)，一次只能展開一個(gè)菜單組，為false，可以存在多個(gè)展開的菜單。（注：這里用菜單一詞不太準(zhǔn)確，先這么著。）

accordion-group定義手風(fēng)琴上的可折疊內(nèi)容，它的heading屬性指定折疊區(qū)域的標(biāo)題，is-open屬性指定當(dāng)前菜單是否打開，為true時(shí)打開，你在HTML中指定true或false時(shí)，是初始值，用戶點(diǎn)擊后，會(huì)改變。你也可以把這個(gè)屬性和Angular作用域模型中的數(shù)據(jù)關(guān)聯(lián)在一起。我引用了Angular的ng-repeat指令內(nèi)置的first屬性，由ng?repeat生成的第一個(gè)item的first屬性值為true。所以我設(shè)計(jì)的手風(fēng)琴區(qū)域，初始加載時(shí)第一個(gè)可折疊菜單時(shí)打開的。

bootstrap-admin.js

復(fù)制原來的admin.js為bootstrap-admin.js，內(nèi)容修改為下面這樣：

angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).
controller('x-controller', function ($scope, $http) {
 $scope.currentUser="ZhangSan";
 $scope.content = '/welcome.html';
 $scope.oneAtATime = false;

 $scope.menus =[
  {
   text: "系統(tǒng)管理",
   enabled: true,
   subMenus:[
    {
     text: "用戶管理",
     enabled: true,
     action:"/admin/addUser"
    },
    {
     text: "角色管理",
     enabled: true,
     action:"/role"    
    },
    {
     text: "權(quán)限管理",
     enabled: true,
     action:"/access"    
    }
   ]
  },
  {
   text: "內(nèi)容管理",
   enabled: true,
   subMenus:[
    {
     text: "直播流監(jiān)控",
     enabled: true,
     action:"/stream-monitor"
    },
    {
     text: "預(yù)約管理",
     enabled: true,
     action:"/book-mgr"    
    }
   ]  
  },
  {
   text: "推送管理",
   enabled: true,
   subMenus:[
    {
     text: "推送列表",
     enabled: true,
     action:"/push-list"
    },
    {
     text: "新增推送",
     enabled: true,
     action:"/add-push"    
    }
   ]  
  }  
 ];

 $scope.setContent = function(action){
  console.log(action);
  $scope.content=action;
 };
});

我給$scope設(shè)置了oneAtATime屬性，初值為false，HTML中accordion元素的close-others屬性和oneAtATime綁定了。所以，最終我們的管理菜單是可以同時(shí)打開多個(gè)的。

最重要的改動(dòng)是第一行代碼：

angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).

注入了對(duì)ui.bootstrap和ngAnimate兩個(gè)模塊的依賴。

好了，最終在瀏覽器里打開“http://localhost:3000/bootstrap-admin.html”，效果如下：

點(diǎn)擊內(nèi)容管理后，效果如下：

以上就是如何在Node.js中引入U(xiǎn)IBootstrap，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

<tr id="c8aiu"></tr>