如何動態添加自定義指令到div元素？

我是angularjs的初學者，請對我輕鬆一點。所以我有這個指令，並且想動態地將它附加到一個div元素。我應該怎麼做？如何動態添加自定義指令到div元素？

appDirectives.directive('test', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/test.html' 
    } 
});

我試過這個，但沒有奏效。我假設模板在我追加到div元素之前沒有被編譯。有沒有一個角度來做到這一點？

<div id="element"></div> 

$('#element').append(<test></test>);

更新：這裏是我想要做的事。當用戶登錄我的頁面時，我有3個不同的模板，我希望它顯示取決於用戶的類型。 3個模板是<basic>, <regular>, <advance> 基本上用戶登錄後，我將具有可變user.type值和想顯示該用戶的適當模板。

任何建議將幫助。謝謝:)

來源

2013-04-24 Son Nguyen

你不應該試圖動態地添加指令或在運行時修改的DOM，不與角很好地工作。你能描述一下你想要做什麼嗎？這可能是一種合適的Angular方式。 – 2013-04-24 06:13:55

沒有可能用角 – 2013-04-24 06:17:37

添加dyanamic指令模板是一個聊天框的自定義視圖。如果用戶想要添加更多聊天框，用戶可以點擊一個按鈕在屏幕上添加更多聊天框。有沒有一個角度來做到這一點？ – 2013-04-24 06:21:00

這樣的事情，可能是什麼？ http://plnkr.co/edit/SmL9fA5GzAxI2WYTnYZy

角度的方式是通過JavaScript對象（在範圍內）代表視圖，並讓Angular模板系統重新模擬您的模型。

來源

2013-04-24 09:09:47 Tosh

謝謝你的回答。它解決了我的一個問題。我只是用一個不同的問題更新了我的問題。你介意看看它嗎？ – 2013-04-24 13:43:28

我認爲馬克的答案是最好的。我懷疑你想使用自定義指令。如果模板很簡單，可以簡單地使用直接html，或者如果它們很長，可以使用ng-include。 – Tosh 2013-04-24 22:42:24

ng-switch可能是你想要什麼：

<div id="element" ng-switch on="user.type"> 
    <span ng-switch-when="basic"><basic></basic></span> 
    <span ng-switch-when="regular"><regular></regular></span> 
    <span ng-switch-when="advance"><advance></advance></span> 
</div>

Plunker

來源

2013-04-24 16:27:59

如何動態添加自定義指令到div元素？

回答

相關問題