Я делаю меню, которое имеет несколько различных типов кнопок с 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()
), но это похоже на много дополнительного кода, чтобы немного почистить формат. Кто-нибудь знает какие-нибудь лучшие способы очистки этого?
Я заметил, что самый простой способ сделать код более читаемым - это поместить атрибуты в отдельные строки. Возьмите это, например:
<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>