AngularJS:从列表中动态添加组件 [英] AngularJS: Dynamically add component from list

问题描述

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

So I am working on a project that will allow a user to modify a template. The base template will be made up for components and the user will be able to add or remove components. I found a few things online - such as grapeJS but it is far to intense for this simple application.

正在寻找一些解决方法的建议，或者任何有帮助的资源.

Looking for some advice on a way to go about this, or any resources that will help.

这是一个基本示例.

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

Basic template will consist of these components

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

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

The list of components a user can choose from to add to template mught consist of..

• 图片幻灯片
• 视频
• 2列文字帖子
• Miley Cyrus的破坏球"自动wav文件播放器

用户将可以从上面的列表中进行选择，并追加到上面的模板列表中.

The user will be able to select from that above list and append to the template list above.

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

Any thoughts or inputs to get me going in the right direction would be helpful!

推荐答案

这应该设置正确的方向:

This should set you in the right direction:

• 将AngularJS组件或指令创建为可单独使用的图像幻灯片，视频，两栏文字发布和Miley Cyrus Video.
• 在您要动态加载上面创建的组件/指令的指令/组件中，使用$compile编译您的组件.然后，使用$element将已编译的元素添加到DOM.

• Create your Image Slideshow, Video, 2 Column Text Post, and Miley Cyrus Video as AngularJS components or directives that work on their own.
• In the directive/component where you want to dynamically load the components/directives you created above, use $compile to compile your components. Then, use $element to add your compiled element to the DOM.

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

I've created a barebones implementation of this, where myTemplate represents the template that holds the main template of your application. The directive slideshow represents the Image Slideshow that is dynamically added to the page when the user clicks on 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.

Click here for a working JSFiddle.

这篇关于AngularJS:从列表中动态添加组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！