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

【问题标题】：How to get contents of multiple elements and append to a div (angular)如何获取多个元素的内容并附加到 div（角度）
【发布时间】：2015-08-28 13:31:28
【问题描述】：

我的应用有两个部分，一个输入部分和一个“视图”部分。它基本上是一个电子邮件代码生成器，它为电子邮件的每个部分使用预定义的模板。我要做的是在更新代码示例时从代码示例中获取内容，并将它们放在视图 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 的最终结果添加到视图？

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

我想出了一个解决方案，并认为我会发布它，以防其他人偶然发现这个问题。您必须创建一个服务，然后在每次更新或创建元素（在本例中为<xmp>）时添加一个$broadcast 事件。之后，您在服务中创建一个数组，并将更新元素的内容推送到该数组。要访问它，您必须创建一个函数来遍历每个结果，推送一个字符串，然后作为受信任的 html 返回。下面是一些sn-ps的代码：

这里是服务

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 始终是唯一的。

【讨论】：