在AngularJS中有类似模板引用的东西吗？

Question

我正在尝试创建一个布局完全由数据驱动的表单.

示例数据源:

{
    title : "Form Test",
    fields : [{
            name : "FieldA",
            type : "string",
            value : "initial value"
        }, {
            name : "FieldB",
            type : "selection",
            options : ["1", "2", "3"],
            value : "2"
        }, {
            name : "FieldC",
            type : "struct",
            value :
            [{
                    name : "FieldC1",
                    type : "string",
                    value : "initial value"
                }, {
                    name : "FieldC2",
                    type : "string",
                    value : "initial value"
                }
            ]
        }
    ]
}

我认为可以使用ng-repeat和ng-switch来选择表单元素,具体取决于'类型',但是当我到达'FieldC'时,我会在执行此操作时遇到困难.

<span ng-switch on="field.type">
    <div ng-switch-when="string">STRING: {{field.value}}</div>
    <div ng-switch-when="selection">SELECTION: {{field.value}}</div>
    <div ng-switch-when="struct">STRUCT: ????</div>
    <div ng-switch-default>DEFAULT:{{field.value}}</div>
</span>

基本上我想要一种方法,当我遇到"结构"时,它递归地将ng-switch应用于结构字段？有没有办法"引用"模板,以便它可以在同一页面上的多个位置使用？模板"部分"的支持似乎需要通过路线协调服务器端,这似乎有点过分.这是我需要开始创建自己的指令吗？

编辑我只是偶然发现这看起来它有可能做我想做的事情(我还没有正确测试它),是朝着正确的方向吗？

Answer 1

您将需要构建一个指令来获取此类数据并从中构建表单.

处理递归的方法是将每个级别(包括顶级)视为另一个结构.我在这里建了一个版本:http://jsfiddle.net/U5Kyp/9/

请务必阅读文档中的指令指南,以便了解正在发生的事情:http://docs.angularjs.org/guide/directive