Question

在我控制器的某个地方说：

$scope.elements = [document.getElementById('a'), document.getElementById('b')];

我在文档中的某处有有效元素，ID为a和b。

我想直接在HTML模板中插入这些元素，而无需编写JavaScript。我尝试了以下操作，但没有用。

<div ng-repeat="e in elements">
    {{ e }}
</div>

这可能吗？

有关我正在做的事情的更多信息：

我有内容（几个通过AJAX加载自己的数据的自定义指令元素），我希望在几列之间分散。内容元素的列将更改，列数将更改。

<column-resizer options="columnResizerOptions">
    <content1></content1>
    <content2></content2>
    ...
</column-resizer>

columnResizer的模板目前看起来像这样：

<ng-transclude></ng-transclude>
<div ng-repeat="column in columns">
    <div ng-repeat="element in column">
        {{ element }}
    </div>
</div>

columnResizerOptions是有关如何调整列大小以及将内容放在列中的位置的信息。在link的{{1}}函数中，我使用columnResizer来抓取transclude - content1并将它们放在与其所在列对应的数组中，我contentn在我的模板中（上图）。

Answer 1

不确定为什么你不会将整个应用程序视为“Angular方式”，但你可以写一个指令来做到这一点：

angular.module('demoApp', [])
  .directive('interpolateHtml', function() {
    return {
      restrict: 'A',
      scope: {
        htmlElement: '='
      },
      link: function postLink(scope, element) {
        element.append(scope.htmlElement);
      }

    }

  })

并在您的HTML中使用它：

<div ng-repeat="e in elements">
  <div interpolate-html html-element="e"></div>
</div>

这是一个有效的plnkr：http://plnkr.co/edit/5NvMA1x0C8TcwdLO2FNK?p=preview

Answer 2

有可能。

$scope.elements = [ (document.getElementById('a') || {}).outerHTML ];

和

<div ng-repeat="e in elements">
    <div ng-bind-html="e"></div>
</div>

您不会以这种方式获取数据绑定。您可以使用innerHTML或jqLite html()来取消额外的包装。

让他们进入DOM而不使用append，因为它会更清晰。

不会。在link中使用嵌套指令或DOM修改的指令是正确的方法，在这种情况下，您不必在任何地方使用数据绑定，因为Angular会提升它。

是否可以在AngularJS中将HTML元素插入到文档中？

2 个答案: