清理AngularJs標記

我注意到AngularJSDOM可以變得非常混亂和混亂。例如：清理AngularJs標記

<ul> 
    <!-- ngRepeat: st in styles --> 
    <li ng-repeat="st in styles" ng-class="{'active': st.id == style.id}" class="ng-scope"> 
     <a ng-click="onStyleChange(st.id)" title="Test Style"> 
      <span class="image" ng-style="{'background-image':'url(/sites/local/main/assets/img/styles/' + st.slug + '.png)'}" style="background-image: url(http://www.bestvinyl.dev/sites/local/main/assets/img/styles/alpha-style.png);"></span> 
     </a> 
    </li><!-- end ngRepeat: st in styles --> 
    <li ng-repeat="st in styles" ng-class="{'active': st.id == style.id}" class="ng-scope"> 
     <a ng-click="onStyleChange(st.id)" title="Closed Picket"> 
      <span class="image" ng-style="{'background-image':'url(/sites/local/main/assets/img/styles/' + st.slug + '.png)'}" style="background-image: url(http://www.bestvinyl.dev/sites/local/main/assets/img/styles/closed-picket.png);"></span> 
     </a> 
    </li> 
</ul>

這可以並且在我的一些應用程序中變得非常混亂。它使得在開發工具中導航DOM時，調試html和css變得困難並且令人討厭。

有沒有辦法清理標記？可能刪除ng-屬性。我不確定所有內部的AngularJS，所以我不確定事後究竟使用了什麼或需要什麼。

這是我打算：

<ul> 
    <!-- ngRepeat: st in styles --> 
    <li class="active ng-scope"> 
     <a title="Test Style"> 
      <span class="image" style="background-image: url(http://www.bestvinyl.dev/sites/local/main/assets/img/styles/alpha-style.png);"></span> 
     </a> 
    </li><!-- end ngRepeat: st in styles --> 
    <li class="ng-scope"> 
     <a title="Closed Picket"> 
      <span class="image" style="background-image: url(http://www.bestvinyl.dev/sites/local/main/assets/img/styles/closed-picket.png);"></span> 
     </a> 
    </li> 
</ul>

我曾與許多類似的框架的HTML是超潔淨看到。 Reactjs是一個想到的例子。

來源

2015-06-27 brenjt

使指令分開你的一些代碼，並讓它更清潔，更易於理解 – aorfevre

好吧。一種方法是把它全部放入cotroller並通過函數調用來解決它。也可以將所有樣式部分作爲類來完成，並且在大多數地方可以使用'ng-class'來減少標記的長度。 – Eugene

這不是真的'DOM'，它既不混亂也不混亂。你也沒有說出你真正想要的。什麼是「乾淨」版本？ Chrome只顯示元素及其設置屬性。 – zeroflagL

你可以使用的功能在你的控制器來回報您納克級/ NG風格導致

即

ng-style="getBG(st.slug)" 


function getBG(slug){ 
    var bg = 'url(/sites/local/main/assets/img/styles/' + slug + '.png' 

    return { 
    'background-image': bg 
    } 
}

隨後DRY原則

來源

2015-06-27 23:24:08 sjm

清理AngularJs標記

回答

相關問題