如何自定义指令，动态地添加到div元素？ [英] How to dynamically add a custom directive to a div element?

问题描述

我在angularjs初学者，请把它容易对我。所以我有这个指令，并想动态地将其添加到一个div元素。我应该怎么办呢？

I'm a beginner at angularjs, please take it easy on me. So I have this directive and would like to dynamically append it to a div element. How should I do it?

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

我试过，但没有奏效。我假设模板之前我追加到div元素没有得到编译。是否有一个角度的方式来做到这一点？

I tried this but it didn't work. I'm assuming the template didn't get compiled before I appended to the div element. Is there an angular way to do this?

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

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

更新：这里是我想要做的。当用户在我的网页记录，我有3个不同的模板，我想它显示取决于用户的类型。
3模板是＆LT;基本＆GT中，＆lt;定期＆GT中，＆lt;＆提前GT;
用户登录后，基本上，我想有一个变量 user.type 的价值，并希望以显示该用户相应的模板。

Update: Here is what I'm trying to do. When a user logged in my page, I have 3 different templates that I would like it to show up depend on the type of of user. The 3 templates are <basic>, <regular>, <advance> Basically after user logged in, I would have the value of a variable user.type and would like to show the appropriate template for that user.

任何建议会有所帮助。谢谢：）

Any suggestions would help. Thank you :)

推荐答案

NG-开关可能是你想要什么：

<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

这篇关于如何自定义指令，动态地添加到div元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！