清理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标记

回答

相关问题