Javascript 如何在AngularJS中动态嵌套指令

刚开始学习，需要一些帮助

我有一个HTML内容块，它将来自一个包含一组小部件的数据库。这些都是简单的小部件，基本上会呈现出各种元素，但是为了解决这个问题，我们假设它们都是基本的HTML

这些小部件是以一种不可预测的方式包含的，所以我的第一个想法是使用指令来呈现HTML。所以，我们会有一些类似于：

<div widget data="This is the content."></div>

 <div widget data="Welcome! ">
    <div widget data="This is some inside content."></div>
 </div>

呈现：

欢迎！这是一些内部内容。

。。。因为我注意到的问题是，如果我在指令HTML中放置任何内容，它基本上会被忽略，因为它会被替换为自己的结果（因此只回显

欢迎！

）

---

我意识到我可能在这一点上走错了方向，所以任何洞察都将不胜感激。非常感谢

这是您需要将指令的功能与

ng transclude

指令结合使用的地方

指令，该指令标记使用转置的最近父指令的转置DOM的插入点

插入转置内容之前，将删除放置此指令的元素的任何现有内容

基于您的示例的内容转换的基本版本可能如下所示：

.directive('widget', function() {
  return {
    transclude: true,//Set transclusion
    template: '{{text}} <section ng-transclude></section>', <!-- set where you need to present the transcluded content -->
    scope: {
      text: "@"
    }
  }
});

.directive（'widget'，function（）{
返回{
transclude:true，//设置转换
模板：“{text}}”，
范围：{
案文：“@”
}
}
});

演示

angular.module（'app'，[]）.directive（'widget'，function（）{
返回{
是的，
模板：“{text}}”，
范围：{
案文：“@”
}
}
});

只要指令的标记不是动态的，并且嵌套更多的是局部视图实现，那么您就需要阅读ng transclude：非常感谢您向我指出这一点。一定要考虑一下！不过，还有一个可能的角度。。。如果我想以这种方式嵌套一个指令呢？看看这把小提琴：