Как получить содержимое нескольких элементов и добавить в div (угловой)

Question

Как получить содержимое нескольких элементов и добавить в div (угловой)

0

Мое приложение имеет два раздела: раздел ввода и раздел "Вид". Его в основном генератор кода электронной почты, который использует предопределенные шаблоны для каждого раздела электронной почты. То, что я пытаюсь сделать, это взять содержимое из образцов кода, поскольку они обновляются, и поместить их в div окна и отобразить их. Вот упрощенная версия ввода:

<div controller="myController">
    <div class="row">
      <input type="text" name="myinput" ng-model="textinput"/>
    </div>
    <xmp type="banner" codeinject></xmp>
</div>

Это директива для ввода кода электронной почты в теги xmp:

app.directive('codeinject', function() {
  return {
    templateUrl: function(elem, attr){
      return 'partials/email-code/'+attr.type+'.html';
    }
  };
})

и вот пример того, что тэг xmp (в соответствии с этим примером) может выглядеть так:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td align="center" valign="middle">{{ textinput }}</td>
      </tr>
   </tbody>
</table>

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как взять контент из каждого <xmp> и добавить его в мой элемент просмотра. Элементы могут быть реорганизованы, удалены и добавлены, поэтому любые решения должны учитывать это. Может ли быть так просто, как создать новую директиву для прикрепления тегов <xmp>? Я попробовал ng-change но поскольку он не является элементом ввода, он не работает.

Может быть, решение состоит в том, чтобы добавить переменную в $rootScope и добавить содержимое каждой <xmp> к этой переменной, а ng-bind-html - окончательный результат в представление?

Devon Taylor 27 авг. 2015, в 04:51

Источник

Теги:

javascript

jquery

html

angularjs

1 ответ

Ещё вопросы

Devon Taylor · Answer 1 · 2015-08-28T03-55-00.000Z

Я понял решение и решил, что я опубликую его на случай, если кто-нибудь еще наткнется на эту проблему. Вам необходимо создать службу, а затем добавить событие $broadcast каждый раз, когда элемент (<xmp> в этом случае) будет обновлен или создан. после этого вы создаете массив внутри службы и нажимаете содержимое обновленного элемента на этот массив. Чтобы получить к нему доступ, вы должны создать функцию для циклического прохождения каждого результата, проталкивания строки и возврата в качестве надежного html. Вот некоторые фрагменты кода:

Вот услуга

app.factory('mySharedService', function($rootScope) {
    var builds = {};
    builds.code = [];
    return builds;
});

Я использовал эту трансляцию в <xmp> каждый раз, когда он был обновлен, или создан новый

$rootScope.$broadcast('codeChange', { element: $element, changed: $element.html() });

Вот моя директива

.directive('getcode', function(mySharedService) {
    return {
        controller: function($rootScope, $scope, $element, $sce,  mySharedService) {
            $scope.rawcode = function(){
                var output = '';
                for (var i = 0; i < mySharedService.code.length; i++) {
                    if (i % 2 == 1) {
                        output += mySharedService.code[i];
                    }
                }
                return $sce.trustAsHtml(output);
            }
            $scope.$on('codeChange', function($scope, args) {
                if (mySharedService.code.indexOf(args.element) == -1) {
                    mySharedService.code.push(args.element, args.changed);
                    indexed = mySharedService.code.indexOf(args.element) + 1;
                    mySharedService.code[indexed] = args.changed;
                }else {
                    indexed = mySharedService.code.indexOf(args.element) + 1;
                    mySharedService.code[indexed] = args.changed;
                }
            });
        }
    }
});

Причина для вставки как $element и $element.html() заключается в том, что существуют повторяющиеся элементы, некоторые из которых содержат один и тот же html. Вы используете +1 в индексе элемента для доступа к этому $element.html() поскольку $element всегда уникален.