如何动态添加自定义指令到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元素？

回答

相关问题