如何动态参数/变量添加到与渲染模板NG绑定，HTML或自定义指令（内NG-重复） [英] How to add dynamic parameters/variables to templates rendered with ng-bind-html or custom directive (inside ng-repeat)

问题描述

编辑：这是基于第一个答案解决方案样品。我们仍欢迎您提供进一步的建议，并填写我的知识一定的差距（见注释）。
plnkr.co/edit/mqGCaBHptlbafR0Ue17j?p=$p$pview

Here is the solution sample based on the first answer. You're still welcome to offer further suggestions and fill some gaps in my knowledge (see comments). plnkr.co/edit/mqGCaBHptlbafR0Ue17j?p=preview

原帖

您好所有的角头，

我试图建立从一组predefined元素构建简单的网页的工具。最终用户设计通过选择布局，元素出现在其中顺序（会有一个选择，也许20-30不同的元素）。一个例子布局：

I’m trying to build a tool for building simple web pages from a set of predefined elements. The end user designs the layout by choosing which elements appear in which order (there would be a selection of maybe 20-30 different elements). An example layout:

Heading
Paragraph
Paragraph
Subheading
Barchart
Paragraph

...等等

引擎盖下，会有JavaScript对象的数组：

Under the hood, there would be an array of Javascript objects:

var page_structure = [
{type: "heading", content: "The final exam - details" },
{type: "paragraph", content: "Bla bla bla bla bla…" },
{type: "paragraph", content: "Bla bla bla bla bla…" }
…
{type: "bar chart", y: "Grades", colour: "blue" }
…
];

最终用户的输入参数，如内容，变，颜色等，为每个单独的元素。

The end user inputs parameters like content, variable, colour, etc, for each individual element.

问题

我不明白怎么画页上这些元素，使每个元素的动态参数都正确包括在内。

I can’t figure how to draw these elements on the page so that the dynamic parameters for each element are properly included.

每个元素类型（标题，段落，条形图，其他可能的内容），有它自己的HTML模板，它必须能够动态显示用户定义的参数。我想我需要的是这样的：

Each element type (heading, paragraph, bar chart, other possible elements) has it’s own HTML template, which has to be able to dynamically display user-defined parameters. I’m thinking I need something like this:

var templates = {
heading: "<h1>USER_CHOSEN_PARAMETER_HERE</h1>",
paragraph: "<p>USER_CHOSEN_PARAMETER_HERE</p>"
…
};

我采用了棱角分明的NG-重复指令，绘制各元素。我已经尝试使用两种NG-HTML绑定...

I’m using Angular’s ng-repeat directive to draw each element. I have tried using either ng-html-bind…

<div ng-repeat="x in page_structure track by $index">
   <div ng-bind-html="templates[x.type]"></div>
</div>

...或自定义的指令，我称之为myComponent的：

…or a custom directive, which I call mycomponent:

<div ng-repeat="x in page_structure track by $index">
   <div mycomponent component='x'></div>
</div>

这两种方法时，有模板没有用户定义的参数工作只是花花公子。我不能，然而，电线起来的参数。随着NG绑定HTML的，我一直在使用一个前pression类似这样的标记尝试：

Both methods work just dandy when there are no user defined parameters in templates. I can’t, however, wire up the parameters. With ng-bind-html, I have tried using an expression markup like this:

var templates = {
heading: "<h1>{{x.content}}</h1>",
paragraph: "<p>{{x.content}}</p>",
…
};

（其实我定义的应用程序控制器的构造函数模板，所以它的$ scope.templates = {喇嘛喇嘛}是precise。）

(I actually define templates in app controller constructor, so it’s $scope.templates = { bla bla } to be precise.)

这是只是显示在实际网页花括号和x.content。我如何参考NG-HTML绑定模板内动态可变参数，或者是它甚至可能吗？

This is just showing curlies and "x.content" in the actual web page. How do I refer to a dynamically variable parameter inside ng-html-bind template, or is it even possible?

我也试过自定义指令路线，定义指令，因为

I also tried the custom directive route, defining the directive as

    .directive('mycomponent', function() {
        return {
                scope: { component: "=" },
                template: templates[component.type]
    }; )

这是更乱了，因为我居然想不出我应该怎么甚至试图在这里指的是动态参数在模板中。所以，我很抱歉，我不能提供什么，我试图做一个有意义的例子。

This was even more messed up, since I actually couldn’t figure out how I should even try to refer to a dynamic parameter here inside the template. So I apologise my inability to offer a meaningful example of what I tried to do.

任何帮助或我应该在这里使用的方法工作的例子是大大AP preciated。我很乐意为您提供，如果需要更多的细节（这是我在SO的第一篇文章，所以我仍然在试图摆脱了如何充实问题JIST）。

Any help or working examples of the methods I should use here are greatly appreciated. I’m happy to provide more details if needed (this is my first post in SO, so I’m still trying to get the jist of how to flesh out the questions).

推荐答案

我建议使用 ngInclude ，您可以在其中有一个检查正确的模板基础上，通过页面结构加载功能可按

I suggest using ngInclude, in which you can have a funciton that check for the proper template to load based on the passed page structure.

<div ng-repeat="structure in page_structure">
    <div ng-include="getMyTemplate(structure)"></div>    
</div>

$scope.getMyTemplate = function(structure) {
    switch (structure.type) {
        case 'heading':
            return '/Views/Heading.html' // or id of a pre-loaded template
        case 'paragraph':
            return '/Views/Paragraph.html' // or id of a pre-loaded template
    }
}

这篇关于如何动态参数/变量添加到与渲染模板NG绑定，HTML或自定义指令（内NG-重复）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！