Очистить разметку AngularJs

Question

Очистить разметку AngularJs

0

Я заметил с 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 - это пример, который приходит на ум.

brenjt 28 июнь 2015, в 01:39

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

sjm · Answer 1 · 2015-06-27T21-01-00.000Z

Вы можете использовать функции в своем контроллере, чтобы вернуть результаты 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