是否可以在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元素到文檔中？

回答

相關問題