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

Question

我想在angularjs中创建一个HTML视图，用户可以在其中编辑对象属性的一些值。我有一个服务模型的对象，然后我也有另一个对象，描述模型对象的属性。

描述对象具有的对象称为参数的阵列，并且每个对象具有诸如名称，描述，类型等这样的属性：

{ 
"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-重复的描述对象是这样的：

<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); 
     } 
    } 
})