多级下拉菜单，侧边菜单在 ng-cloak 中不起作用答案

【问题标题】：Multi level drop down, side menu does not work in ng-cloak多级下拉菜单，侧边菜单在 ng-cloak 中不起作用
【发布时间】：2015-11-21 20:57:34
【问题描述】：

我正在基于此引导模板创建 Web 应用程序： http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html

但我对多级下拉列表有疑问。在我的项目中，我使用的是 angular，这是我的主要索引：

<body>
    <div id="wrapper">
        <div ui-view="navbar" ng-cloak=""></div>
    </div>      
    <div class="well" ui-view="content" id="page-wrapper"></div>
    <...list of source file>
</body>

在 ui-view 导航栏中，我有导航栏、顶部和左侧菜单。在此导航栏中添加多级下拉菜单时，下拉菜单无法正常工作，它是可见的，但在单击时不会隐藏。但是，当我将它添加到 div 包装器下方时，一切正常，我不知道为什么它在主索引中有效，而在我的包装器中却没有。

【问题讨论】：

标签： jquery html css angularjs twitter-bootstrap

【解决方案1】：

我没有尝试 ui-view，但这太难了。因为如何控制我不知道的其他 ui 视图。如果你想在我的仓库中检查我的指令模块 fsm-accordion.js：https://github.com/fsma/angularjs-sb-admin2

谢谢马可。这里是代码，我希望这对你 Pulkownik 有所帮助。

<!-- side menu--> 
    <li class="sidebar-search">
        <div class="input-group custom-search-form">
            <input type="text" class="form-control" placeholder="Search...">
            <span class="input-group-btn">
            <button class="btn btn-default" type="button">
                <i class="fa fa-search"></i>
            </button>
        </span>
        </div>
        <!-- /input-group -->
    </li>
    <!-- side menu -->
    <li ng-repeat="item in menu"  id="menu{{$id}}" >
        <a fsm-menu sub-data="{{item.scndmenu ? true : false}}" ng-href="{{item.url}}">    
            <i class="fa {{item.css}} fa-fw"></i> 
            {{item.title}}
            <span ng-if="item.scndmenu ? true : false" class="fa arrow"></span>
        </a>
        <ul id="scndmenu"  class="nav nav-second-level" >
            <li  ng-repeat="subitem in item.scndmenu" id="menusncd{{$id}}">
                <a fsm-menu sub-data="{{subitem.thrdmenu ? true : false}}" ng-href="{{subitem.url}}"> 
                    {{subitem.title}}
                    <span ng-if="subitem.thrdmenu ? true : false" class="fa arrow"></span>
                </a>
                <ul id="thrdmenu"  class="nav nav-third-level " >
                  <li ng-repeat="sub2item in subitem.thrdmenu" id="menuthrd{{$id}}">
                        <a ng-href="{{sub2item.url}}"> 
                            {{sub2item.title}}
                        </a>
                  </li>     
               </ul>
            </li>
        </ul>        
    </li>
    <!-- /side menu-->     

    angular.module('fsmAccordion', [])
       .directive('fsmMenu', ['$document', '$window',
           function($window, $document) {
               return {
                   restrict: 'EAC',
                   scope: "@",
                   link: function(scope, element, attr) {
                       element.on('click', function(e) {
                           var liElementId = e.target.closest('li').id;
                           for (var i = 0; i < $('#' + liElementId).parent().children().length; i++) {
                               if (attr.subData == "true") {
                                   e.preventDefault();
                               }
                               if ($($('#' + liElementId).parent().children()[i]).hasClass("active")) {
                                       $(this).parent().removeClass('active');
                               }
                           }
                           if ($('#' + liElementId + " ul").css("display") == "none") {
                               if (attr.subData == "true") {
                                   e.preventDefault();
                               }
                               $('#' + liElementId).addClass('active');

                           }
                       });
                   }
               };
           }
       ]);

【讨论】：