Question

我是angularjs的新手，正在实施一个菜单框架，它既是垂直的又是水平取决于按钮切换。正在实施的菜单使用自定义指令，如下所示。

<my-menu>
    <my-menu-item></my-menu-item>
    <my-menu-group label="Fruits">
        <my-menu-item label="Apple"></my-menu-item>
        <my-menu-item label="Orange"></my-menu-item>
    </my-menu-group>
    <my-menu-group label="Vegetables">
        <my-menu-item label="Tomato"></my-menu-item>
        <my-menu-item label="Beans"></my-menu-item>
    </my-menu-group>
<my-menu>

<my-menu-group>的模板是：

<li class="my-selectable-item" ng-click="clickedMenuGroupItem()" ng-class="{'my-item-horizontal': !isVertical()}">
<div class="acc-noselect">
    <i class="fa {{icon}} my-menu-icon"></i>
    {{label}}
    <i ng-if="isVertical()"
       class="fa fa-angle-right my-group-indicator-left" ng-class="{'fa-rotate-90':isOpen}"></i>

    <i ng-if="!isVertical()" style="margin-left:5px;"
       class="fa fa-angle-down" ng-class="{'fa-rotate-180':isOpen}"></i>

</div>

link函数的代码段为：

link: function(scope,el,attr,ctrl) {
            scope.isOpen = false;
            scope.closeMenu = function () {
                scope.isOpen = false;
            };
            scope.clickedMenuGroupItem = function () {
                scope.isOpen = !scope.isOpen;
                if (el.parents('.my-subitem-section').length === 0) 
                    scope.setSubmenuPosition();
                ctrl.setOpenMenuScope(scope);
            };

            scope.isVertical = function() {
                return ctrl.isVertical() || el.parents('.my-subitem-section').length > 0;
            };

            scope.setSubmenuPosition = function(){
                var pos = el.offset();
                $('.my-subitem-section').css({'left':pos.left + 20, 'top' : 40});
            };
        }

垂直菜单工作正常。但是当菜单是水平的，如果我点击'Fruits'我得到相应的列表值然后当我点击蔬菜时，列表都会被渲染。我期待的是切换功能这里的底线是我无法控制链接功能中先前点击元素的范围。我尽力在这里尽可能描述。请帮忙吗？

在Angularjs中实现水平组菜单的问题

0 个答案: