Динамически добавление элементов в Angularjs

Question

Мне нужно динамически добавлять элементы в Angularjs.
Я успешно добавил их.
Но я не могу передать их значения в переменные области видимости.
Вместо этого мне нужно создать элементы в отдельной фабрике.создания внутри директивы.

fieldsFactory добавить элементы для входных данных.Эти элементы должны предоставлять данные в массив data в директиве scope wrapper.

Вы можете помочь?

angular.module('app', [])
  .factory('fieldsFactory', fieldsFactory)
  .directive('wrapper', wrapper);


function wrapper(fieldsFactory) {
  return {
    template: `
    
        Add select
        Add input
        

`, link: wrapperLinkFn}} функция wrapperLinkFn (scope, iElement, iAttrs, iCtrl, transcludeFn) {scope.addField = addField;scope.fieldsCounter = 0;var fieldsFactory = iElement.injector (). get ('fieldsFactory');function addField (fieldType) {fieldsFactory (scope, iElement, fieldType, scope.fieldsCounter);scope.fieldsCounter ++;}} function fieldsFactory () {функция возврата (scope, iElement, fieldType, fieldsCounter) {var field;switch (fieldType) {case 'input': field = `

`;перерыв;case 'select': field = `

select1 выберите2

`;перерыв;по умолчанию: field = '';} iElement.injector (). invoke (function ($ compile) {iElement.append ($ compile (field) (scope));});}} angular.bootstrap (document.getElementById ('root'), ['app']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
  <wrapper></wrapper>
</div>

Answer 1

Мои шаги:

• определил isolateScope для созданных элементов

  var isolateScope = iElement.scope().$new(true);
  

• определил переменную в isolateScope их для хранения введенных данных

• определенная функция ng-change, вызывающая функцию в родительской области

  isolateScope.onChange = function() {
     iElement.scope().setFieldValue(fieldsCounter, isolateScope.fieldValue);
  }
  

• определенная функция в родительской области, которая устанавливает значение для определенного ключа и запускаЦикл $ digest для родительской области действия

  function setFieldValue(key, value) {
    scope.data[key] = value;
  }
  

• определил функцию, которая связывает значение данных

  function getData() {
    return scope.data;
  }
  

angular.module('app', [])
  .factory('fieldsFactory', fieldsFactory)
  .directive('wrapper', wrapper);


function wrapper(fieldsFactory) {
  return {
    template: `
    
        Add select
        Add input
        
          
        
      
    `,
    link: wrapperLinkFn
  }
}

function wrapperLinkFn(
  scope,
  iElement
) {
  scope.addField = addField;
  scope.setFieldValue = setFieldValue;
  scope.getData = getData;
  scope.fieldsCounter = 0;
  scope.data = {};

  function setFieldValue(key, value) {
    scope.data[key] = value;
  }
  
  function getData() {
    return scope.data;
  }

  var fieldsFactory = iElement.injector().get('fieldsFactory');

  function addField(fieldType) {
    fieldsFactory(scope, iElement, fieldType, scope.fieldsCounter);
    scope.fieldsCounter++;
  }
}

function fieldsFactory() {
  return function(scope, iElement, fieldType, fieldsCounter) {
    var field;
    switch (fieldType) {
      case 'input':
        field = `
        
          
        
        `;
        break;
      case 'select':
        field = `
        
          
            select1
            select2
          
          

`;перерыв;по умолчанию: field = '';} iElement.injector (). invoke (function ($ compile) {var isolateScope = iElement.scope (). $ new (true); isolateScope.onChange = function () {iElement.scope (). setFieldValue (fieldsCounter, isolateScope.fieldValue); console.log (iElement.scope (). data);} iElement.append ($ compile (field) (isolateScope));});}} angular.bootstrap (document.getElementById ('root'), ['app']);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
  <wrapper></wrapper>
</div>