Question

我正在使用AngularJS创建一个具有几种不同类型按钮的菜单。根据按钮的类型，html需要具有不同的特征。此外，当前选择的菜单项需要具有与可用按钮不同的颜色。目前，我正在使用这一堆代码：

<div id="navbar" ng-show="navbar.show" ng-mouseenter="navbar.keep()" ng-mouseleave="navbar.release()">

    <div ng-repeat="navSection in navbar.navSections" ng-init="sectionIndex = $index" class="navblock">
        <div ng-repeat="navItem in navSection.navigationItems">
            <div ng-switch on="navItem.function">
                <div ng-switch-when='CategoryNav', ng-click='navbar.navClick(sectionIndex, $index)'>
                    <div info="navItem", ng-if='sectionIndex == navbar.section && $index == navbar.item', id="selected">
                        <a ui-sref="{{navItem.function}}" ng-href="{{navItem.function}}">
                            <div class="navbutton">{{navItem.label}}</div>
                        </a>
                    </div>
                    <div info="navItem", ng-if='sectionIndex != navbar.section || $index != navbar.item', id="notselected">
                        <a ui-sref="{{navItem.function}}" ng-href="{{navItem.function}}">
                            <div class="navbutton">{{navItem.label}}</div>
                        </a>
                    </div>
                </div>

                <div ng-switch-when='StorefrontNav', ng-click='navbar.changeStorefront(navItem.type)'>
                    <div info="navItem", id="notselected">
                        <a ui-sref="{{navItem.function}}" ng-href="{{navItem.function}}">
                            <div class="navbutton">{{navItem.label}}</div>
                        </a>
                    </div>
                </div>

                <div ng-switch-default>
                    <div info="navItem", ng-if='sectionIndex == navbar.section && $index == navbar.item', id="selected">
                        <a ui-sref="{{navItem.function}}" ng-href="{{navItem.function}}">
                            <div class="navbutton">{{navItem.label}}</div>
                        </a>
                    </div>
                    <div info="navItem", ng-if='sectionIndex != navbar.section || $index != navbar.item', id="notselected">
                        <a ui-sref="{{navItem.function}}" ng-href="{{navItem.function}}">
                            <div class="navbutton">{{navItem.label}}</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

它工作正常，但我想清理一下。我已经考虑过制作一个指令并传递不同链接需要工作的函数（例如，navbar.changeStoreFront()），但这似乎只是为了清理格式一些额外的代码。有谁知道更好的方法来清理它？

Answer 1

我注意到使代码更具可读性的最简单方法是将属性放在不同的行上。以此为例：

Delegate Sub MyDelegate(ByVal input As String)


Sub MyDelegateDefault(ByVal input As String)
    'by default do nothing'
End Sub


Sub MyDelegateCustom1(ByVal input As String)
    'do something here'
End Sub

清理角部分

1 个答案: