HTML стал «рваным» и нечитабельным после использования Angular JS. Что я делаю не так?

Question

[Сергей]

Предположим, что есть такой кусок кода (см ниже).
Он хорошо работает, но читается ужасно из-за слишком большого количества HTML атрибутов, нужных для Angular.
Все, что делает - это позволяет добавлять несколько номеров телефнов для клиента. Блоков с аналогичным функционалом в моей форме с десяток, и с десяток попроще. В результате получается гигантская нечитаемая мешанина.

Можно ли это как-то исправить?

<div class="form-group">
  <label class="col-md-2 control-label">
    Телефон:
  </label>
  <div class="col-md-10 row order-data-inputs">
    <div class="col-md-6" ng:repeat="phone in order.data.clientPhoneNumbers" >
      <div ng:class="{'input-group': !phone.id}">
        <p ng:if="phone.id" class="form-control-static">{{ phone.value }}</p>

        <input
            ng:if="!phone.id"
            ng:selection="!phone.id"
            ng:tel
            ng:model="phone.value"
            type="text"
            placeholder="[phone]"
            name="phone"
            class="form-control input-sm"
            />
            <span class="input-group-btn">
              <a
                  ng:if="!phone.id"
                  ng:click="order.data.clientPhoneNumbers.splice($index, 1)"
                  class="btn btn-danger btn-sm"
                  href=""
                  >
                <i class="fa fa-times"></i> Удалить
              </a>
            </span>
      </div><!-- /input-group -->
    </div><!-- /col-md-2 -->
    <div
        class="col-md-3"
        ng:show="!order.data.clientPhoneNumbers.last() || order.data.clientPhoneNumbers.last().value">
      <a ng:click="dataAdd('phone')" class="btn btn-default btn-sm" href=""><i class="fa fa-plus-sign"></i> Добавить</a>
    </div>
  </div> <!--/order-data-inputs-->
</div>

Answer 1

[kompi]

Возможно, имеет смысл перегруженные тэги выносить в кастомные директивы.

Comments

[Сергей]

Возможн это выход для типовых тэгов, но таких мало, + для каждого такого тэга будет будет 3-4 параметра. Да, это не 7 как сейчас, и количество параметров уменьшится. Но появится куча директив, которые надо помнить...

И всеравно будут длинные теги, использующиеся всего один раз, которые портят всю красоту.

Answer 2

[Руслан Лопатин]

Да ничего тут особо не поделаешь. Можно добавить контроллеров и вытащить сложные выражения в функции, чтобы вместо

!order.data.clientPhoneNumbers.last() || order.data.clientPhoneNumbers.last().value

писать просто
afterLastPhone()

Если всё ещё режет глаз - вытаскивайте код в шаблоны. Тот же принцип рефакторинга, что применяется в обычном коде: разделять большие функции на множество маленьких. Читаемость должна повыситься.

Comments

[Сергей]

Спасибо за ответ, я конечно, надеялся на "волшебный" метод :)

А что делать с такими вот тегами? Как-то их можно читабельно писать?

[Сергей]

<pagination class="parts-pagination"
                ng:if="pages > 1"
                on-select-page="selectPage(page)"
                boundary-links="true"
                align="center"
                num-pages="pages"
                current-page="page"
                previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>

[Руслан Лопатин]

Ну, конкретно pagination можно настраивать глобально, через paginationConfig. Такие настройки будут применены ко всем элементам pagination в вашем проекте. Вот пример. Кроме того, это как раз тот случай, когда уместно сделать директиву, дополняющую pagination.

[Сергей]

@lorus Да, в данном случае определенно можно сделать директиву (или конфиг - что еще лучше). В любом случае остается четыре параметра (num-pages, current-page, on-select-page, ngif) которые никуда не денешь...

Откопал еще пару примеров

<select
		ng:if="!color.id"
		ng:focus="!color.id"
		ng:required="!color.id"
		ng:model="color.value"
		ng:options="color.id as color.name for color in colors"
		class="form-control input-sm">
		<option value="">Цвет:</option>
</select>

<tr ng:repeat="sale in sales" ng-animate="{enter: 'animate-enter', leave: 'animate-leave', move: 'animate-move'}" ng:class="{info: sale.status == 'delivery', warning: sale.status == 'reserve', error: sale.status == 'delete', success: sale.status == 'finish'}">

Как вы поступаете в таких случаях? И как оптимизировать, конкретно, длиннющий ng:class (был где-то и более длинный и гораздо более сложный пример)?

[Руслан Лопатин]

Если делать директиву, то можно оставить один-единственный параметр и передавать в него объект с заранее известной структурой. И даже с функциями. Возможностей-тьма.

ng-class, очевидно, вынести в функцию, как и любое длинное выражение JavaScript.