AngularJS中具有切换功能的Vertical SideMenu

Question

我有一个静态网站，我需要使用AngularJS进行开发。

如何开发具有切换功能的垂直sideMenu， 边菜单有menuItems-> sub-menuItems-> Sub-sub-MenuItems？

赞：

以下是我的html代码？

如何将其转换为angularjs中的侧边栏指令，以便可以重用？

<li class="active ">
            <a href="javascript:;">
            <i class="fa fa-medkit"></i>
            <span class="title">Health and Safety</span>
            <span class="arrow "></span>
            </a>
            <ul class="sub-menu">

                 <li class=" ">
                    <a href="javascript:;"> 
                    <i class="fa fa-dashboard"></i>
                     H & S Dashboard  
                    <span class="arrow "></span>
                    </a>
                </li>
                <li class="active">
                    <a href="javascript:;"> 
                    <i class="fa fa-check"></i>
                    HIRA<span class="arrow "></span>
                     </a>
                     <ul class="sub-menu">
                        <li class="">
                            <a href="#/hira-list" > 
                            <i class="fa fa-list"></i>
                            HIRA List

                            </a>
                        </li>
                        <li class="active">
                            <a href="#/hira-intimation">  
                            <i class="fa fa-pencil"></i>
                            HIRA Creation
                             </a>
                        </li>


                    </ul>
                </li>
                <li class="">
                    <a href="javascript:;" > 
                    <i class="fa fa-list"></i>
                         Accident
                    <span class="arrow "></span>
                    </a>

                    <ul class="sub-menu">
                        <li class="">
                            <a href="#/accident-list" > 
                            <i class="fa fa-list"></i>
                            Accident List

                            </a>
                        </li>
                        <li class="">
                            <a href="#/accident-intimation">  
                            <i class="fa fa-ambulance"></i>
                            Intimation
                             </a>
                        </li>
                        <li class="">
                            <a href="#/accident-detailed-report">
                            <i class="fa fa-user-md"></i>
                            Detailed Report</a>
                        </li>
                        <li class="">
                            <a href="#/accident-rcp"> 
                            <i class="fa fa-check"></i>
                            RCA & CAPA
                             </a>
                        </li>

                    </ul>
                </li>
                <li class="active">
                    <a href="javascript:;">  
                    <i class="fa fa-ambulance"></i>
                     Unsafe Action
                    <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li class="">
                            <a href="#/unsafe-action-list"> 
                            <i class="fa fa-list"></i>
                             Unsafe Action List
                            </a>
                        </li>
                        <li class="active">
                            <a href="#/unsafe-action-intimation">  
                            <i class="fa fa-ambulance"></i>
                                Intimation
                             </a>
                        </li>
                        <!-- <li class=" ">
                            <a href="javascript:;"> 
                            <i class="fa fa-check"></i>
                                RCA & CAPA
                             </a>
                        </li> -->
                    </ul>
                </li>
                 <li class="active">
                    <a href="javascript:;">  
                    <i class="fa fa-ambulance"></i>
                     Unsafe Condition
                    <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li class="">
                            <a href="#/unsafe-condition-list"> 
                            <i class="fa fa-list"></i>
                            Unsafe Conditon List

                            </a>
                        </li>
                        <li class="active">
                            <a href="#/unsafe-condition-intimation">  
                            <i class="fa fa-ambulance"></i>
                                Intimation
                             </a>
                        </li>
                        <!-- <li class=" ">
                            <a href="javascript:;"> 
                            <i class="fa fa-check"></i>
                                RCA & CAPA
                             </a>
                        </li> -->
                    </ul>
                </li>
                <li class="active">
                    <a href="javascript:;"> 
                    <i class="fa fa-check"></i>
                     Near Miss 
                    <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li class=" ">
                            <a href="#/near-miss-list" > 
                            <i class="fa fa-list"></i>
                                Near Miss List

                            </a>
                        </li>
                        <li class="active">
                            <a href="#/near-miss-intimation">  
                            <i class="fa fa-ambulance"></i>
                                Intimation
                             </a>
                        </li>
                        <li class=" ">
                            <a href="javascript:;"> 
                            <i class="fa fa-check"></i>
                                RCA & CAPA
                             </a>
                        </li>
                    </ul>
                </li>
                <li class=" ">
                    <a href="javascript:;">  
                        <i class="fa fa-ambulance"></i>
                        Suggestion
                        <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li class="">
                            <a href="javascript:;" > 
                            <i class="fa fa-list"></i>
                            Suggestion List

                        </a>
                        </li>
                        <li class="">
                            <a href="javascript:;">  
                                <i class="fa fa-ambulance"></i>
                                Intimation
                             </a>
                        </li>
                        <li class=" ">
                            <a href="javascript:;"> 
                            <i class="fa fa-check"></i>
                             Status
                             </a>
                        </li>
                    </ul>
                </li>
                 <li class="">
                    <a href="javascript:;">  
                        <i class="fa fa-ambulance"></i>
                        Monitor & Measures
                        <span class="arrow "></span>
                    </a>
                </li>
            </ul>
        </li>

        *open close functionality in sidebar*