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

【问题标题】：AngularJS: Dynamically add component from listAngularJS：从列表中动态添加组件
【发布时间】：2018-05-13 10:38:43
【问题描述】：

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

寻找一些关于如何解决这个问题的建议，或任何有帮助的资源。

这是一个基本示例。

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

标题
文字发布
单张图片
页脚

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

图片幻灯片
视频
2 栏文字帖
麦莉赛勒斯的 Wrecking Ball 自动 wav 文件播放器

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

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

【问题讨论】：

用户可以将这些组件添加到任何部分（页眉、文本帖子、单个图像、页脚），还是仅添加到文本帖子？
要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是题外话，因为它们往往会吸引固执己见答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。

标签： javascript angularjs user-interface components

【解决方案1】：

这应该会让你朝着正确的方向前进：

将您的图像幻灯片、视频、2 列文本帖子和麦莉赛勒斯视频创建为独立工作的 AngularJS 组件或指令。
在要动态加载上面创建的组件/指令的指令/组件中，使用$compile 编译组件。然后，使用$element 将编译后的元素添加到 DOM。

我已经为此创建了一个准系统实现，其中myTemplate 表示包含应用程序主模板的模板。指令slideshow 表示当用户单击Add Component 时动态添加到页面的图像幻灯片。

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>"
  }
});

单击here 以获得工作的 JSFiddle。

【讨论】：