AngularJS部分指令下拉不起作用

Question

我正在添加一个侧边栏的下拉列表，我将其作为指令部分模板加载。所有的CSS都从我的base.html加载正常，但下拉列表在我的sidebar.html中无法正常工作。如果我将sidebar.html中的html剪切并粘贴到base.html中，则下拉列表工作正常。所有其他css似乎都在工作。除了树之外的所有东西似乎都是好的。感谢。

Base.html

    <aside class="left-side sidebar-offcanvas">      
     <side-bar></side-bar>
    </aside >      

Sidebar.html

 <div class="sidebar">

        <ul class="sidebar-menu">
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-bar-chart-o"></i>
                    <span>Group Name</span>
                    <i class="fa fa-angle-left pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="/members/"><i class="fa fa-angle-double-right"></i> Members</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> Calender</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> Albums</a></li>
                </ul>
            </li>
            </ul>
    </div>     

指令：

angular.module('App')
  .directive('sideBar', function(appService) {
    return {

        restrict: 'E',
        replace:'true',

      templateUrl: '/static/templates/sidebar.html'

}
});