Javascript 如何获取多个元素的内容并附加到div（角度）

我的应用程序有两个部分，一个输入部分和一个“查看”部分。它基本上是一个电子邮件代码生成器，为电子邮件的每个部分使用预定义的模板。我试图做的是在代码示例更新时从中获取内容，并将它们放在view div中并呈现它们。以下是输入的简化版本：

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

下面是一个xmp标记（适合本例）的示例：

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

{{textinput}}

我遇到的问题是，我无法找到从每个

标记获取内容并将其附加到我的查看元素的方法。元素可以被重新组织、删除和添加，所以任何解决方案都应该考虑到这一点。这是否可以像创建一个新指令来附加

标记那样简单？我尝试了

ng change

，但因为它不是一个输入元素，所以不起作用

---

也许一个解决方案是将一个变量添加到

$rootScope

，并将每个

的内容添加到该变量，然后

ng bind html

将最终结果添加到视图中

我想出了一个解决方案，我想如果有人偶然发现这个问题，我会发布它。您必须创建一个服务，然后在每次更新或创建元素（

）时添加一个

$broadcast

事件。然后在服务中创建一个数组，并将更新元素的内容推送到该数组中。要访问它，您必须创建一个函数来循环遍历每个结果，推送一个字符串，并作为受信任的html返回。以下是一些代码片段：

这是服务

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

每次更新或创建新内容时，我都在

元素上使用此广播

$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;
                }
            });
        }
    }
});

指令（'getcode'，函数（mySharedService）{ 返回{ 控制器：函数（$rootScope、$scope、$element、$sce、mySharedService）{ $scope.rawcode=函数（）{ var输出=“”； 对于（var i=0；i 插入

$element

和

$element.html（）。您可以使用元素索引上的
+1
来访问该
$element.html（）
，因为
$element
总是唯一的

.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;
                }
            });
        }
    }
});