Javascript 从动态数据生成AngularJS UI模板

我是Angular和前端开发的新手，尝试学习Angular并用它来创造一些东西。我已经学习了基础知识和更高级的东西，了解了我的方法，创建了一些示例应用程序，现在开始构建一些有用的东西。 我在服务器端定义了一个数据模型，我想在前端展示它们。显然，通常的方法是创建html模板，绑定字段，然后通过ui router之类的东西将它们粘在一起，这样可以工作，但我正在考虑构建更具动态性的东西，可以在不首先创建模板的情况下呈现数据。我不确定这是否可行，甚至不是一个好主意，所以这是我的问题。 有什么东西可以基于数据模型构建这些部分模板吗？我的首选是运行时，但设计时也不错

---

提前谢谢。

这可以做到。请参考此链接

---

显示的代码存在XSS漏洞，如果显示名称为警报“lmao”或更糟怎么办？。不要将原始字符串连接到HTML中。更喜欢将元素创建为对象，设置属性，并将它们作为文档片段附加在一起。至少，转义非html输入字符串。您需要将<替换为&with&；与&39；只有属性值才需要引号转义。

// My Application
var myApp = angular.module('myAngularApp', ['ui']);

// A Directive to generate Dynamic Template
myApp.directive('dynamicTemplate', function ($compile) {
  return {
    restrict: 'E',
    scope: { form_generator_schema: '=data' },
    link: function (scope, elm, attrs) {
      console.log("Directive Called");
      var schema = scope.form_generator_schema.schema;
      var field_inputs = "";
      for (var field in schema){
        var new_field = "";
        var field_type = schema[field].data_type == "boolean" ? "checkbox" : schema[field].data_type;

        switch (field_type){
          case 'file':
            new_field = "<div>" + schema[field].display_name + ":<input type='file' ng-model='" + field_type + "' id='fileToUpload' class='file-field' /></div>";
            break;
          default:
            new_field = "<div>" + schema[field].display_name + ":<input type='" + field_type + "' ng-model='" + field_type + "'/></div>";
        }

        field_inputs = field_inputs + new_field;
      }
      elm.append($compile(field_inputs)(scope));
    }
  };
});


// My Controller
function myController($scope){
  $scope.dynamicContent = {
    "schema":[
      {"data_type":"string", "display_name":"MyField123"},
      {"data_type":"file", "display_name":"MyField456"},
      {"data_type":"checkbox", "display_name":"MyField789"}
    ]
  };
}