Как динамически вводить угловые 1,5 компонента, основываясь на условии?

Question

Вот небольшой фрагмент моего кода:

<div class="list-group">
    <div class="list-group-item list-group-item-default text-center">{{p.Name}}</div>
    <div class="list-group-item">
        <!--Using bootstrap form-group for each field -->
        <div ng-repeat="f in p.Fields">

            <!--Here I want to inject components dynamically-->
            <!--<text-field></text-field>-->

        </div>
    </div>
</div>

в <div ng-repeat="f in p.Fields">...</div> Мне нужно ввести соответствующий компонент, такой как <text-field>, <text-area-field> и т. д. динамически, исходя из условия:

if (f.type == "TEXTFIELD") >>> введите <text-field>составная часть
if (f.type == "TEXTAREAFIELD") >>> введите <text-area-field>составная часть

и так далее...

Какой лучший способ сделать это? Благодарю.

Answer 1

Вы можете сделать это следующим образом:

<div class="list-group">
    <div class="list-group-item list-group-item-default text-center">{{p.Name}}</div>
    <div class="list-group-item">
        <!--Using bootstrap form-group for each field -->
        <div ng-repeat="f in p.Fields">

            <div ng-if="f.type == 'TEXTFIELD'">
               <text-field></text-field>
            </div>

            <div ng-if="f.type == 'TEXTAREAFIELD'">
               <text-area-field></text-area-field>
            </div>

        </div>
    </div>
</div>

Answer 2

Это зависит от того, нужно ли использовать ввод, который вы печатаете на странице, под углом (ng-модель).

Если это так, вам нужен поставщик $compile.

Я предлагаю сделать директиву, чтобы справиться с этим. Вы могли бы иметь:

 <div ng-repeat="f in p.Fields">
      <x-your-directive params={{f}}>
 </div>

В вашей директиве вы получите данные для анализа через attrs.params

Затем вам нужно ввести себе $compile так же, как и для $scope, services и т. Д.

Затем вы можете применить новый ввод с помощью angular.element (который является jQLite).

Чтобы сделать это, и чтобы angular понимал вновь созданный элемент DOM, вот где вы используете $compile.

$compile скажет angular для динамического анализа элемента.

Пример:

angular.module('your_module', []).directive('yourDirective', ['$scope', '$compile', function($scope, $compile) {
    return {
        restrict: 'E',
        controllerAs: 'YourCtrl',
        controller: [function() {}],
        link: function ($scope, element, attrs, ctrl) {
            // Switch case on attrs.params (which is f in p.Fields)
            if (attrs.params === 'TEXTFIELD') {
                element.html($compile('<input type="text"/>')($scope))
            }
        }
    }
}])

Круто то, что это работает и для директив (печатная часть). Поэтому, если вы хотите динамически добавлять директивы в вашу DOM, вы можете:)