Как вводить угловые компоненты 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> и т.д ... динамически, основываясь на состоянии:

если (f.type == "TextField") >>> впрыснуть <text-field> компонент
если (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

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

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

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

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

В вашей директиве, вы бы Получать данные для анализа с помощью attrs.params

Затем нужно вводить себя, тем $ компилировать, точно так же, как для $ рамки , услуги и т. д.

Затем вы можете применить новый вход с угловым элементом (который является jQLite).

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

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

Пример:

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, вы можете: