如果要想根据角色动态生成路由，可以在angular还没有启动的时候获取该用户角色的所有路由（也可以说菜单），然后循环菜单 通过 ui-router动态加入即可；
一般项目把所有的js和模板都打包压缩成一个js，反而效果更好；
<!DOCTYPE html><html>
<head>
<title>制作无限下拉菜单咋整 前台JS 【数组嵌套json】后台TP5 </title>
<meta charset="UTF-8" />
<script>
//菜单类 1.盒子id 2.菜单数组
function Menu(boxId, menus){
//创建菜单
this.create = function(level){
var element = document.createElement('ul'),
item = null, //当前项目
title = null //项目标题
level = level ? level : 0 //当前等级，没有传参数为顶级
for(var i in menus){
if(level == menus[i].gid){
item = document.createElement('li')
title = document.createElement('span')
title.innerHTML = menus[i].title
item.appendChild(title)
item.appendChild(this.create(menus[i].id))
element.appendChild(item)
}
}
return element
}
this.box = document.getElementById(boxId)
this.box.appendChild(this.create())
}
window.onload = function(){
var menus = [
{"id" : "1", "gid" : "0", "title" : "客户管理", "statue" : "0", "url" : "/sets/1"},
{"id" : "2", "gid" : "1", "title" : "客户列表", "statue" : "0", "url" : "/sets/2"},
{"id" : "3", "gid" : "1", "title" : "客户状态", "statue" : "0", "url" : "/sets/3"},
{"id" : "4", "gid" : "3", "title" : "睡着的", "statue" : "0", "url" : "/sets/4"},
{"id" : "5", "gid" : "3", "title" : "发财的", "statue" : "0", "url" : "/sets/5"},
{"id" : "6", "gid" : "4", "title" : "眯着眼睡的", "statue" : "0", "url" : "/sets/6"},
{"id" : "7", "gid" : "0", "title" : "员工管理", "statue" : "0", "url" : "/sets/7"},
{"id" : "8", "gid" : "0", "title" : "等级管理", "statue" : "0", "url" : "/sets/8"},
{"id" : "9", "gid" : "0", "title" : "客户管理2", "statue" : "0", "url" : "/sets/9"},
{"id" : "10", "gid" : "7", "title" : "准备滚蛋的", "statue" : "0", "url" : "/sets/10"},
{"id" : "11", "gid" : "10", "title" : "带着铺盖滚蛋的", "statue" : "0", "url" : "/sets/11"},
{"id" : "12", "gid" : "0", "title" : "系统设置", "statue" : "0", "url" : "/sets/12"},
{"id" : "13", "gid" : "2", "title" : "大海设置", "statue" : "0", "url" : "/sets/13"}
]
var menu = new Menu('menus', menus)
}
</script>
</head>
<body>
<div id="menus"></div>
</body>
</html>
这个代码可以无限级别，思路就是寻找当前对象的子对象
改改样式就可以了，如果想设置为点击或者鼠标移动到上面时候展开，只需要给li绑定事件控制子元素ul的display即可，不会写的话追问，多给点分我的更有动力哦。。
带阴影的时间：<html>
<head>
<style type="text/css">
<!--
.time{
font-family : Comic Sans Ms
font-size : 14pt
font-weight : bold
color: #00008D
}
-->
</style>
<style type="text/css">
<!--
.time{
font-family : Comic Sans Ms
font-size : 14pt
font-weight : bold
color: #00008D
}
-->
</style>
</head>
<script Language="JavaScript">
<!-- Hiding
var ctimer
function init(){
if (document.all){
tim2.style.left=tim1.style.posLeft
tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6
settimes()
}
}
function settimes(){
var time= new Date()
hours= time.getHours()
mins= time.getMinutes()
secs= time.getSeconds()
if (hours<10)
hours="0"+hours
if(mins<10)
mins="0"+mins
if (secs<10)
secs="0"+secs
tim1.innerHTML=hours+":"+mins+":"+secs
tim2.innerHTML=hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960)
}
// -->
</script>
<body onLoad="init()">
<div Id="tim1" Style="position:absolutewidth:10height:10top:10left:50"
class="time"></div><div Id="tim2"
Style="position:absolutefilter:flipv() alpha(opacity=20)font-style:italic"
class="time"></div>
</body>
<script Language="JavaScript">
<!-- Hiding
var ctimer
function init(){
if (document.all){
tim2.style.left=tim1.style.posLeft
tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6
settimes()
}
}
function settimes(){
var time= new Date()
hours= time.getHours()
mins= time.getMinutes()
secs= time.getSeconds()
if (hours<10)
hours="0"+hours
if(mins<10)
mins="0"+mins
if (secs<10)
secs="0"+secs
tim1.innerHTML=hours+":"+mins+":"+secs
tim2.innerHTML=hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960)
}
// -->
</script>
</html>
多级关联菜单 这个你自己做下小的改动 没有错误的代码
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array()
var arrItemsGrp1 = new Array()
arrItems1[3] = "Truck"
arrItemsGrp1[3] = 1
arrItems1[4] = "Train"
arrItemsGrp1[4] = 1
arrItems1[5] = "Car"
arrItemsGrp1[5] = 1
arrItems1[6] = "Boat"
arrItemsGrp1[6] = 2
arrItems1[7] = "Submarine"
arrItemsGrp1[7] = 2
arrItems1[0] = "Planes"
arrItemsGrp1[0] = 3
arrItems1[1] = "Ultralight"
arrItemsGrp1[1] = 3
arrItems1[2] = "Glider"
arrItemsGrp1[2] = 3
var arrItems2 = new Array()
var arrItemsGrp2 = new Array()
arrItems2[21] = "747"
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna"
arrItemsGrp2[22] = 0
arrItems2[31] = "Kolb Flyer"
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox"
arrItemsGrp2[34] = 1
arrItems2[35] = "Schwietzer Glider"
arrItemsGrp2[35] = 2
arrItems2[99] = "Chevy Malibu"
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS"
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3"
arrItemsGrp2[57] = 5
arrItems2[101] = "F-150"
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe"
arrItemsGrp2[102] = 3
arrItems2[103] = "Freight Train"
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train"
arrItemsGrp2[104] = 4
arrItems2[105] = "Oil Tanker"
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat"
arrItemsGrp2[106] = 6
arrItems2[200] = "Los Angelas Class"
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class"
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class"
arrItemsGrp2[203] = 7
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle
var x
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.lengthq>=0q--) controlToPopulate.options[q]=null
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.lengthq>=0q--) myChoices.thirdChoice.options[q] = null
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option")
myEle.value = 0
myEle.text = "[SELECT]"
controlToPopulate.add(myEle)
for ( x = 0 x <ItemArray.length x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option")
myEle.value = x
myEle.text = ItemArray[x]
controlToPopulate.add(myEle)
}
}
}
// End -->
</script>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1)">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2)">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>
希望对你有所帮助
