javascript - AngularJS:从列表中动态添加组件

Question

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

正在寻找解决此问题的建议或任何有帮助的资源。

这是一个基本的例子。

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

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

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

• 图片幻灯片
• 视频
• 2 列文本发布
• Miley Cyrus 的 Wrecking Ball 自动 wav 文件播放器

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

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

Answer 1

这应该让您朝着正确的方向前进:

• 将您的图片幻灯片、视频、2 栏文本帖子和 Miley Cyrus 视频创建为独立运行的 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。