Question

我正在尝试在angularjs中创建一个html视图，用户可以在对象属性上编辑某些值。我在服务中有一个模型的对象，然后我还有另一个描述模型对象属性的对象。

描述对象有一个名为parameters的对象数组，每个对象都有如name，description，type等属性，如下所示：

{
"name": "item",
"description": "An item",
"parameters": [{
    "name": "prop1",
    "wasNullable": false,
    "description": "a property",
    "type": "string",
    "isRequired": true
}, {
    "name": "prop2",
    "wasNullable": true,
    "description": "a property",
    "type": "string",
    "isRequired": true
}]

}

我想使用此数据为要操作的对象构建视图。如果属性名称是一个字符串，我想要一个带有文本输入的html模板和一个这样的标签：

<label>{{ parameter.name</label>
<input type="text" placeholder="parameter.description"></input>

我希望能够将这些“类型模板”作为单独的html文件。

我无法解决如何执行此操作并处理数据绑定问题。一条路径可能是对描述对象上的参数数组执行ng-repeat，如下所示：

<div ng-repeat="param in $ctrl.definitions.parameters">
<div ng-switch="param.primitiveType">
    <div ng-switch-when="string">
        <string></string>
    </div>
    <div ng-switch-when="dateTime">
        <date-time></date-time>
    </div>
    <div ng-switch-when="enum">
        <enum></enum>
    </div>
</div>
<div ng-if="param.subTypes">
    <select ng-model="select.subType">
        <option ng-repeat="subType in property.subTypes">{{ subType.name }}</option>
    </select>
    <div ng-repeat="subType in property.subTypes">
        <properties type="subType" ng-if="select.subType === subType.name"></properties>
    </div>
</div>

这可以解决我的问题，因为我可以为每种类型的属性使用组件，但我无法弄清楚如何对服务中存在的另一个对象进行数据绑定。

另一种方法是将所有带有默认值的参数从描述对象添加到实际模型对象，然后对引用的模型对象执行ng-repeat但是我不能有这种切换到正确html的解决方案模板。

关于如何解决这个问题的任何想法？

Answer 1

有多种解决方案，但与您提供的代码最接近的应该是将数据传递到模板directives。

这实际上是使用directive的基础知识之一，您可以像这样传递来自父级的数据：

<div ng-switch-when="string">
    <string param="param"></string>
</div>
<div ng-switch-when="dateTime">
    <date-time param="param"></date-time>
</div>
<div ng-switch-when="enum">
    <enum param="param"></enum>
</div>

.directive('string', function(){
    return {
        scope: {
            param: '='
        },
        controller: function ($scope) {
            console.log($scope.param);
        }
    }
})

angularjs使用基于对象属性和模板的数据绑定创建html

1 个答案: