Javascript AngularJS：从列表中动态添加组件

因此，我正在进行一个项目，该项目将允许用户修改模板。基本模板将由组件组成，用户可以添加或删除组件。我在网上找到了一些东西，比如grapeJS，但对于这个简单的应用程序来说，这远远不够

寻找一些关于这方面的建议，或者任何有帮助的资源

这是一个基本的例子

基本模板将由这些组件组成

• 标题
• 文本帖子
• 单幅图像
• 页脚

用户可以从中选择添加到模板的组件列表包括

• 图像幻灯片
• 录像带
• 2列文本帖子
• 麦莉·塞勒斯的《毁灭之球》自动wav文件播放器

用户将能够从上面的列表中进行选择，并附加到上面的模板列表中

---

任何让我朝正确方向前进的想法或意见都会很有帮助

这将为您指明正确的方向：

• 创建图像幻灯片、视频、2列文本帖子和Miley Cyrus视频，作为AngularJS组件或指令独立工作
• 在要动态加载上面创建的组件/指令的指令/组件中，使用

  $compile

  编译组件。然后，使用

  $element

  将编译后的元素添加到DOM中

我已经创建了一个基本实现，其中

myTemplate

表示保存应用程序主模板的模板。指令

slideshow

表示当用户单击

addcomponent

时动态添加到页面的图像幻灯片

HTML

<div>
  <my-template></my-template>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('myTemplate', function($rootScope, $compile) {
    return {
    controller: function($element, $scope) {
        var vm = this;
        vm.name = "name";

      vm.insert = function() {
        var elStr = "<slideshow></slideshow>";
        var newScope = $rootScope.$new();
        var insertedEl = $compile(elStr)(newScope);
        $element.append(insertedEl);
      };
    },
    controllerAs: "vm",
    template: "<h1>Header</h1><p>Body</p><footer>Footer</footer><button ng-click='vm.insert()'>Add Component</button>"
  }
});

myApp.directive("slideshow", function() {
    return {
    controller: function() {
        this.text = "THIS IS A SLIDESHOW";
    },
    controllerAs: "vm",
    template: "<h1>{{vm.text}}</h1>"
  }
});

var myApp=angular.module（'myApp'，[]）；
指令（'myTemplate'，函数（$rootScope，$compile）{
返回{
控制器：函数（$element，$scope）{
var vm=这个；
vm.name=“name”；
vm.insert=函数（）{
var elStr=“”；
var newScope=$rootScope.$new（）；
var insertedEl=$compile（elStr）（新闻镜）；
$element.append（insertedEl）；
};
},
controllerAs:“虚拟机”，
模板：“页眉正文页脚添加组件”
}
});
指令（“幻灯片”，函数（）{
返回{
控制器：函数（）{
this.text=“这是一个幻灯片”；
},
controllerAs:“虚拟机”，
模板：“{vm.text}”
}
});

---

单击以获得一个工作的JSFIDLE

用户可以将这些组件添加到任何部分（页眉、文本帖子、单幅图像、页脚）或仅添加到文本帖子中吗？要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题会导致堆栈溢出，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决问题所做的工作。