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