Я заметил с AngularJS
что DOM
может стать очень грязным и хаотичным. Например:
<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>
В некоторых моих приложениях это может и получилось очень грязным. Это позволяет отлаживать html и css сложные и в то же время раздражать при навигации по DOM
в инструментах dev.
Есть ли способ очистить разметку? Возможно удаление атрибутов 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 - это пример, который приходит на ум.
Вы можете использовать функции в своем контроллере, чтобы вернуть результаты ng-class/ng-style
т.е.
ng-style="getBG(st.slug)"
function getBG(slug){
var bg = 'url(/sites/local/main/assets/img/styles/' + slug + '.png'
return {
'background-image': bg
}
}
Что следует принципам DRY