Question

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

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

<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包装器一切正常，我不知道为什么在主索引中它工作，而在我的包装器中没有。

Answer 1

我没有尝试过ui-view，但这太难了。因为如何控制其他ui-views我不知道。如果你想在我的回购中检查我的指令模块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');

                           }
                       });
                   }
               };
           }
       ]);

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

1 个答案: