Как звонить Angular JS - Директивы динамически - PullRequest
Новая
       20

Как звонить Angular JS - Директивы динамически

0 голосов
/ 15 марта 2020

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

Controller. js 

_ctr.getFilters = () =>{
     _ctr.suppliers_opts = [
          {
              id: 1,
              name: 'XXXX'
          }, {
              id: 2,
              name: 'XXXX'
          }
     ];

     return [
         ['Supplier Name', 'supplier_name', _ctr.suppliers_opts, 'template-select-many'],
         ['Team', 'team', null, 'template-select'],
         ['Technicians', 'technicians', null, 'template-select-many'],
         ['Description', 'description', null, 'template-text-box']
     ]
 }

Передача массива в директиву.

Форма. html

<template-filters
    tb-filters="{{ _ctr.getFilters() }}">
</template-filters>

Итерация пройденного массива и вызов директивы .

Директива. js

.directive('templateFilters', function (factory) {
    return {
         restrict: 'E',
         replace: true,
         scope: {
             tbFilters: '@'
         },
         link: (scope, element, attrs) => {
              // tbFilters per iteration index[0] -- Label
              // tbFilters per iteration index[1] -- Id
              // tbFilters per iteration index[2] -- Options
              // tbFilters per iteration index[3] -- Template
         },
         template:
         `
         <div>
              <div ng-repeat="filters in tbFilters">
                  <{{ filters[3] }}
                        label="{{ filters[0] }}"
                        id="{{ filters[1] }}"
                        options="{{ filters[2] }}">
                  </{{ filters[3] }}>
              </div>
         </div>
         `
    }
 })
.directive('templateSelect', function (factory) {
    return {
         restrict: 'E',
         replace: true,
         scope: {
             label: '@',
             id: '@',
             options: '@'
         },
         link: (scope, element, attrs) => {

         },
         template:
         `
         `
    }
 })
...