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

Question

因此，我正在开发一个项目，该项目将允许用户修改模板。基本模板将由组件组成，并且用户将能够添加或删除组件。我在网上找到了一些东西-例如grapeJS，但是对于这个简单的应用程序来说，它的意义不容小intense。

寻找解决方法的建议或任何有帮助的资源。

这是一个基本示例。

基本模板将包含这些组件

• 标头
• 文字发布
• 单张图片
• 页脚

用户可以选择要添加到模板的组成组件列表。

• 图片幻灯片
• 视频
• 2列文字发布
• 麦莉·赛勒斯（Miley Cyrus）的《破坏球》自动WAV文件播放器

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

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

Answer 1

这应该为您设定正确的方向：

• 创建图像幻灯片，视频，2列文本发布和Miley Cyrus Video作为可独立工作的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>"
  }
});

单击此处以获取可用的JSFiddle。