清理角部分

我正在製作一個菜單，其中包含幾個與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()），但似乎需要很多額外的代碼才能將格式清理一些。有沒有人知道有什麼更好的方法來清理呢？

來源

2015-07-02 wmaxlees

一條或兩條指令似乎是適合我的路。如果你使用默認值和選項來保持簡短，那麼代碼就不那麼多了。指令也將保持乾燥，所以更改將需要較少的工作。 –

嗯。我認爲保持DRY是一個很好的理由，在那裏使用指令。好決定。 – wmaxlees

這樣做的最麻煩的地方是在指令模板中獲取正確的Angular表達式。此外，假設您使用隔離，請確保知道如何/何時使用'='和'@'綁定到外部作用域。 –

我注意到使代碼更易讀的最簡單方法是將屬性放在不同的行上。以此爲例：

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

來源

2015-07-02 18:11:31

回答

相關問題