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

说，在我的控制器的地方，我有：是否可以在AngularJS中插入HTML元素到文档中？

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

和我的a和b ID的文档中的某个地方有有效元素。

我想直接在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是关于如何调整列宽和在哪里列中的内容放置信息。在columnResizer的link函数中，我使用transclude来获取content1-contentn，并将它们放置在与它们应该位于的列对应的数组中，这些列在我的模板（上面）中通过。

来源

2015-07-10 Josh Sherick

为什么这甚至是必要的？任何时候你使用'document.getElementById（）'，你都试图对DOM进行编程。角度不需要以这种方式进行开发。HTML内容如何在不知情的情况下进入这些元素，或者在页面呈现时能够被服务器告知？这里没有东西加起来。 – Claies

你可以更多地展示你实际上正在做什么，以及为什么你不能在数据上使用'ng-repeat'而不是呈现的HTML？就目前来看，这绝对是一个XY问题。见http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/66378#66378 – Claies

我试图保持简单的问题，但也许我没有包含足够的信息。我的重复是在指令模板中。我的指令元素包含transcluded元素，我用'transclude（）'函数在'link（）'中获取并分散到一组数组中，我希望每个数组都显示在不同的'ng-repeat' div'。我将用这些信息更新原始问题。 –

不知道为什么你不会把你的整个应用程序的“角的方式”，但你可以写一个指令，要做到这一点：

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

来源

2015-07-10 23:13:14 yvesmancera

这是可能的。

$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不会提倡使用数据绑定。

来源

2015-07-10 23:22:34 estus

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

回答

相关问题