从动态数据生成AngularJS UI模板

Generating AngularJS UI templates from dynamic data

本文关键字：AngularJS UI 模板 动态 数据      更新时间：2024-01-03

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

提前谢谢。

这是可以做到的。请参阅此链接https://gist.github.com/rohit9889/3918170.

// 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"}
    ]
  };
}
相关文章：