Javascript 使用模板服务的自定义指令中的角度分析器出现问题

长期潜伏者第一次海报。我对angular非常陌生，但我正在构建一个小应用程序，它基于通过票务系统API检索的JSON模式动态生成表单。我在这里尽量避免硬编码，因为如果在票证系统中添加自定义字段，模式可能会改变

到目前为止，应用程序加载模式并构建输入字段，并使用“@data type”确定要应用哪种类型的模板

问题是，我正在努力获得我想要的最终输出JSON

所需的JSON输出

{
  "Custom_Field": [
    {
      "@id": "120207",
      "#text": "1234569789"
    },
    {
      "@id": "121264",
      "Option": {
        "@id": "265946",
        "@viewOrder": "1",
        "Value": "North America"
      }
    },
    {
      "@id": "125734",
      "#text": "Legacy Account Number"
    }
  ],
  "Account_Name": "Example Account",
  "Modified_By": "John Doe"
}

app.controller('FormController', function($scope, pSchema) {

    // Initialize User Input Scope
    $scope.userinput = {};
    $scope.userinput.Custom_Field = [{}];

    // Load Schema
    $scope.loadschema = function(schematype) {
        pSchema.loadSchema(schematype).success(function(data) {
            $scope.schema = data[Object.keys(data)[1]];
        });
    }

});

app.directive('fieldItem', function ($compile, $parse, TemplateService) {

    var linker = function(scope, element, attrs, ngModel) {

        if (!angular.isArray(scope.field)) {

            templater(scope.field['@data-type']); 
            parseCustomField();

                // Quasi Work Around
                // Models the data correctly in the userinput.Custom_Field Array, but original bindings aren't really desired for each Custom_Field item on userinput.
                /*
                if('id' in attrs) { 
                    scope.$watch(attrs.ngModel, function (oldValue, newValue) {         
                        if (newValue != oldValue) {
                            var parentNode = scope.$parent.key; //Evaluates to "Custom_Field"   
                            var i = scope.$index;

                            if (angular.isObject(newValue)){
                                var newObj = {
                                    '@id' : attrs.id,
                                    'Option' : newValue
                                };                      
                            } else {
                                var newObj = {
                                    '@id' : attrs.id,
                                    '#text' : newValue
                                };
                            }
                            scope.userinput[parentNode][i] = newObj;
                        }
                    });     
                }
                */  

        } else {
            templater('array');             
        }

        //Helper Functions
        //Request Template
        function templater(field_type) {
            TemplateService.getTemplate(field_type).then(function (response) {  
                element.html(response.data);
                $compile(element.contents())(scope);
            });
        }
        //Parse Data
        function parseCustomField(){
            var toModel = function (val) {
                return {
                    '@id': attrs.id,
                    '#text':val                 
                }
            };                  
            ngModel.$parsers.unshift(toModel);
        }
    }

    //Directive Configuration
    return {
        restrict: 'E',
        require: '?ngModel',
        link: linker
    };

});

app.factory('TemplateService', function ($http) {
    var getTemplate = function (content) {
        if (content != null) {
            return $http.get('/js/templates/' + content + '.html');
        }
    };
    return {
        getTemplate: getTemplate
    };
});

app.factory('pSchema', function($http) {
    return {
        loadSchema: function(type) {
            var url = "/js/models/schema/"+type+".json";
            return $http.get(url);
        }       
    };
});

具体来说，我对如何最好地处理嵌套在数组中的嵌套对象有点困惑。例如，“Custom_Field”数组中的每个对象都将作为输入字段呈现，但仍应在该Custom_Field数组中建立索引

此外，使用my template service加载模板后，parseCustomField（）函数似乎不起作用

无论如何，这是我试图将可重用代码作为noob的尝试，但对于这里真正看到的任何东西，我都会提出建议

JSON模式（为了简洁起见删除了一些对象）

应用程序（混合在一起但通常分开）

String.html

<div class="form-group">
    <label>{{field["@display-name"]}}</label>
    <input ng-model="userinput[key]" class="form-control" />
</div>

<form ng-controller="FormController" ng-model="userinput">
    <field-item ng-repeat="(key,field) in schema"></field-item>
</form>

{{field[“@display name”]}

Array.html（也可以在没有模板的情况下找到更好的方法）

Index.html

<div class="form-group">
    <label>{{field["@display-name"]}}</label>
    <input ng-model="userinput[key]" class="form-control" />
</div>

<form ng-controller="FormController" ng-model="userinput">
    <field-item ng-repeat="(key,field) in schema"></field-item>
</form>

我不明白你真正的问题是什么。注意不要追逐XY问题。因此，在这方面有一些评论：1）删除对问题不重要的所有内容（只在

CustomFields

或更一般的情况下有问题），2）清楚地解释最终输出/JSON/DOM结构应该是什么（比如，如果要硬编码），3）尝试将问题分解为更小的部分（可能还有多个问题）-是否需要动态创建DOM元素，是否需要维护特定的ViewModel结构等…）感谢您的回答。我试着说得更清楚一点。简而言之：1）我已经动态地创建了大部分DOM元素，但是我在保持视图结构和嵌套在数组中的对象时遇到了问题。2） 我的$parser在使用模板服务时似乎没有被应用。我是在问你的用例，而不是行为。当然！简言之，我正在建立一套工具，以便更好地与我使用的票务系统进行交互，并与其他系统进行批量导入和同步帐户、联系人等操作。这里的表单示例实际上是我试图构建一个动态创建的交互式视图模型，该模型尽可能忠实于模式，但如果发生模式更改，仍然能够处理模式更改。最终，我的绝对最终目标是允许用户从两个不同的系统映射两个模式，将此模型保存到数据库，并将其用于帐户、联系人等的双向同步。这只是我从票务系统获取/设置数据的第一步。