Cleaning up Angular Partials

Question

I am making a menu that has a few different types of buttons with AngularJS. Based on the type of button, the html needs to have different characteristics. Also, the currently selected menu item needs to have a different color than the available buttons. Currently, I am using this mess of code:

<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>

It works fine but I want to clean it up a little bit. I have thought about making a directive and passing in the functions the different links need to work (for example, the navbar.changeStoreFront()) but that seems like a lot of extra code just to clean the format up a bit. Does anyone know any better ways of cleaning this up?

Answer 1

I noticed that the simplest way to make the code more readable is to put the attributes on separate lines. Take this for example:

<ui-gmap-google-map center='{expression}'
                    control='{Object}'
                    zoom='{expression}'
                    dragging='{expression}'
                    refresh='{expression}'
                    options='{expression}'
                    events='{expression}'
                    bounds='{expression}'
                    pan='{string or boolean}'
        >

    <!-- other ui-gmap-directives here -->

</ui-gmap-google-map>