javascript - AngularJS:动态分配 NgModel

Question

我有一个 Controller ，其中有一个名为 fields 的数组。该数组具有以下结构(以一些数据为例):

[
    {
        "name": "Demarcación",
        "type": "multiple",
        "scope": "restricted",
        "icon": "location-arrow",
        "order": 1,
        "id": 1,
        "possible_values": [
            {
                "id": 1,
                "field_id": 1,
                "name": "Demarcación 1"
            },
            {
                "id": 2,
                "field_id": 1,
                "name": "Demarcación 2"
            },
            {
                "id": 3,
                "field_id": 1,
                "name": "Demarcación 3"
            }
        ],
        "values": [
            {
                "id": 3,
                "value": "Demarcación 3"
            }
        ]
    },
    ...
]

然后，我想创建一个表单，其中根据字段的类型和范围动态构建输入。因此，例如，如果 scope 等于 free，则会添加 textarea。否则，将添加输入文本。

我还需要根据字段类型执行一些Javascript初始化，因此 - 例如 - 如果范围受到限制，我需要在以下位置初始化一个JQuery插件该输入。

我尝试设置一个函数，在其中构造 HTML 字符串，然后在 ngRepeat 中打印它，但我得到的文本为纯文本(即使使用 $sce.trustAsHtml ())，但运气不好。

问题

有什么方法可以动态编写输入/html 添加到文档中 - 并处理一些 Javascript 逻辑 - 并且我可以动态附加一些 AngularJS 属性(例如 ngModel ，因此它的值)与对象进行数据绑定(bind))？

输入将位于 ngRepeat 指令内，因此我可以访问迭代的对象，并且可以将它们作为变量传递到函数中。

谢谢!

Answer 1

我认为您正在寻找的是 $compile 服务

Angular Documentation for $compile

$compile(element.contents())(scope);

Example in plunkr