带有动态 HTML 模板的 AngularJS 递归指令答案

【问题标题】：AngularJS recursive directive with a dynamic HTML template带有动态 HTML 模板的 AngularJS 递归指令
【发布时间】：2014-06-01 16:53:01
【问题描述】：

我在这里有一个非常艰巨的任务。我正在开发一个AngularJS 网络应用程序，它能够向我们项目的Restful Web Service 发送不同的HTTP 方法并接收JSON 响应。基本上是这样的：

您可以从此应用程序创建一些REST resource。假设是exam。要创建考试 - 您从可用资源列表中选择一个资源。这会触发一个函数，该函数向localhost:8080/STEP/api/explain/resorceName 发送请求并获取此资源的描述。描述如下：

http://jsonblob.com/534fc022e4b0bb44248d6460

收到响应后 - 我开始构建输入字段，如下所示（allFields - 此资源的字段对象数组，enumValues - 资源字段的枚举值，如果它是属性 isEnum = true）：

<div ng-repeat="field in allFields">
    <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="updateEntityResource[field.name]" ng-change="getUpdateEntityAsText()"
            class="form-control" placeholder="{{parseClassName(field.type)}}">
    </div>
    <div ng-show={{field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <select ng-model="updateEntityResource[field.name]" ng-change="getUpdateEntityAsText()" class="form-control">
            <option></option>
            <option ng-repeat="enumValue in field.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>
        </select>
    </div>
</div>

现在，问题来了。我需要创建一个递归指令，它能够以上述方式为每个“restResourceName”不为空的资源字段生成字段。要获取所有字段，您只需向 localhost:8080/STEP/api/explain/restResourceName 发送请求并获得与上图类似的 JSON 响应，然后用于构建 HTML 元素以将值输入模型。

如何使用角度递归指令来实现？

【问题讨论】：

也许看看这个：stackoverflow.com/questions/19125551/…

标签： javascript json angularjs rest recursion

【解决方案1】：

我认为你是在正确的轨道上。我创建了a small plunkr，它根据 js 对象中的描述生成表单。

index.html:

<body ng-controller="MainCtrl">

  <div my-form form-config="allFields" model="model1"></div>
  <div my-form form-config="allFields" model="model2"></div>

  Model 1: {{model1|json}}<br>
  Model 2: {{model2|json}}<br>

</body>

myForm.html（模板）：

<div ng-repeat="field in formConfig">
      <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="model[field.name]">
      </div>
</div>

JS：

app.controller('MainCtrl', function($scope) {
  $scope.allFields = [
    {
      "isEnum": false,
      "isRequired": true,
      "name": "First name"
    },
    {
      "isEnum": false,
      "isRequired": false,
      "name": "Last name"
    }
    ];

  $scope.model1 = {};
  $scope.model2 = {"First name":"John","Last name":"Doe"};
});

app.directive('myForm', function() {
  return {
    scope: {
      formConfig:"=",
      model:"="
    },
    templateUrl:"myForm.html",
  };
});

你到底在坚持什么？

【讨论】：

我无法制定一个指令来执行您在 plunkr 中所做的事情 + 是该字段具有 restResourceName - 它应该为每个字段递归调用。
您是否有包含字段的字段？
是的。其中可以包含字段等
如果字段本身是一个资源（我们在开始时选择的列表中的一个 - 它应该以与原始根资源相同的方式“打开”）
我已经更新了我的答案，它现在是一个指令。对于递归部分，最终结果是否仍然是“平面”形式的输入？

【解决方案2】：

我不确定你是否已经看过这个，但这听起来很像你在说什么。 http://jsbin.com/acibiv/3/edit

写这篇文章的人在这里解释了一下：

http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/

【讨论】：