несколько вызовов на шаблон против вызовов внутри ng-repeat

Question

Я работаю над переносом ОГРОМНОЙ angular формы на новый макет (не могу изменить технологии). Текущая версия взята из огромного неприятного массива javascript, который подается в ng-repeat и вызывает различные шаблоны. Шаблоны не меняются в новой форме, за исключением некоторых новых вещей css. Новый / старый путь, по которому следует angular для создания формы html, управляется переключателем функций на стороне сервера (на самом деле это не импорт в этот вопрос).

Для формы единственное отличие теперь заключается в I я не в ng-repeat l oop, и вместо этого я делаю ng-include несколько раз в более четко определенном макете.

Проблема, с которой я сталкиваюсь, заключается в передаче значений в каждый ng-include элементы получают только значения ng-init последнего вызова на странице, см. Пример ниже.

<!-- begin template definitions -->
<script type="text/ng-template" id="/templates/currency.html">
    <ul class="input-field-layout">
        <li>
            <input type="text" class="form-control {{field.additionalClasses}}" id="input_{{field.name}}"
                   ng-class="{{field.ngClass}}"
                   ng-model="$ctrl.contract[field.name]"
                   ng-disabled="field.disabled && !$ctrl.overrideSelected"
                   ng-change="field.onChange()"
                   ng-blur="field.onBlur()"
                   ng-readonly="field.readOnly"
            />
            <span class="input-group-btn" ng-if="field.showCalculator && field.canCalculate()">
                <button type="button" class="btn btn-default btn-sm"
                        id="calc_{{field.name}}"
                        ng-click="field.calculate()"
                        tabindex="-1"
                >
                    <i class="glyphicon glyphicon-flash"></i>
                </button>
            </span>
        </li>
        <li class="input-description-text" ng-if="field.descriptionText">
            <span>{{field.descriptionText}}</span>
        </li>
    </ul>
</script>
<!-- end template definitions -->


<!-- begin snippet for old form -->
<div ng-repeat="fieldGroup in $ctrl.fieldGroups">
    <div class="clearfix" ng-if="fieldGroup.clearFixClass == true"></div>
    <div>
        <h3>{{fieldGroup.name}}</h3>
        <hr>
        <div class="form-group form-group-sm"
             ng-repeat="field in fieldGroup.fields">
            <label class="control-label {{field.additionalClasses}}" for="input_{{field.name}}">{{field.field_label}}</label>
            <div ng-include="'/templates/'+field.type+'.html'"></div>
        </div>
    </div>
</div>
<!-- begin snippet for old form -->


<!-- being snippet for new form -->
<div class="flexRow">
    <label class="boldInput" for="input_adjustment">Adjustment</label>
    <div
        ng-init="
        field = {
            name: 'adjustment'
        }
        "
        ng-include="'/templates/currency.html'">
    </div>
</div>
<div class="flexRow">
    <label class="boldInput" for="input_total_due">Total</label>
    <div
        ng-init="
        field = {
            name: 'total',
            descriptionText: 'blah blah blah',
            disabled: $ctrl.disabledCheck.disabled_fields,
            showCalculator: true,
            calculate: $ctrl.calculateTotal,
            canCalculate: $ctrl.canCalculateTotal,
            additionalClasses: 'boldInput'
        }
        "
        ng-include="'/templates/currency.html'">
    </div>
</div>
<!-- end snippet for new form -->

Старый лог c генерирует то, что вы ожидаете, но новый лог c генерирует следующее. Обратите внимание, как оба поля имеют идентификатор input_total и другие атрибуты / значения последнего вызова шаблона на странице.

<div class="flexRow">
    <label class="boldInput" for="input_adjustment">Adjustment</label>
    <ul class="input-field-layout ng-scope">
        <li>
            <input type="text" class="form-control boldInput ng-empty ng-touched" id="input_total" ng-class="" ng-model="$ctrl.contract[field.name]" ng-disabled="field.disabled">
            <!-- ngIf: field.showCalculator && field.canCalculate() -->
        </li>
        <!-- ngIf: field.descriptionText --><li class="input-description-text ng-scope" ng-if="field.descriptionText">
            <span class="ng-binding">blah blah blah</span>
        </li><!-- end ngIf: field.descriptionText -->
    </ul>
</div>
<div class="flexRow">
    <label class="boldInput" for="input_total">Total</label>
    <ul class="input-field-layout ng-scope">
        <li>
            <input type="text" class="form-control boldInput ng-empty ng-touched" id="input_total" ng-class="" ng-model="$ctrl.contract[field.name]" ng-disabled="field.disabled">
            <!-- i've removed the calculator html for sake of space in this question -->
        </li>
        <!-- ngIf: field.descriptionText --><li class="input-description-text ng-scope" ng-if="field.descriptionText">
            <span class="ng-binding">blah blah blah</span>
        </li><!-- end ngIf: field.descriptionText -->
    </ul>
</div>

Мне кажется, ng-init - это не то, что я должен использовать для передачи -в значениях field для шаблонов в новой форме logi c, но дядя Гугл меня подводит.

Что я должен использовать вместо ng-init или как работает область (?) изменить внутри ng-repeat против нескольких вызовов шаблонов?

Answer 1

Я только что нашел это сообщение: Потеря области при использовании ng-include

Кажется, если вы добавляете ng-if="true" к ng-include, это вызывает angular создание новой области !

Это, вероятно, использует предостережение в angular ng-if, но позволяет мне двигаться вперед.

<!-- being modified snippet for new form -->
<div class="flexRow">
    <label class="boldInput" for="input_adjustment">Adjustment</label>
    <div
        ng-if="true"
        ng-init="
        field = {
            name: 'adjustment'
        }
        "
        ng-include="'/templates/currency.html'">
    </div>
</div>
<div class="flexRow">
    <label class="boldInput" for="input_total_due">Total</label>
    <div
        ng-if="true"
        ng-init="
        field = {
            name: 'total',
            descriptionText: 'blah blah blah',
            disabled: $ctrl.disabledCheck.disabled_fields,
            showCalculator: true,
            calculate: $ctrl.calculateTotal,
            canCalculate: $ctrl.canCalculateTotal,
            additionalClasses: 'boldInput'
        }
        "
        ng-include="'/templates/currency.html'">
    </div>
</div>
<!-- end modified snippet for new form -->

Answer 2

Когда вы присваиваете field = { ... }, вы перезаписываете его во второй раз, что связывает его с исходным шаблоном.

Для этого типа «передачи параметра в шаблон» вам действительно следует использовать директива или компонент.

Причина, по которой работает ng-repeat, заключается в том, что он создает свою собственную область видимости для каждой итерации, то есть переменная init каждый раз связана с другой областью видимости и не перезаписывается.