Question

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

Answer 1

我想出了一个解决方案，并认为如果其他人偶然发现这个问题，我会发布它。您必须创建服务，然后每次更新或创建元素（在这种情况下为$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始终是唯一的。

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

1 个答案: