Question

我是Angular和前端开发的新手，并试图学习Angular并用它创造一些东西。我已经完成了基础知识和更高级的东西，并且知道我的方式并创建了一些示例应用程序，现在开始构建一些有用的东西。我有一个在服务器端定义的数据模型，我想在前端显示它们。显然通常的方法是创建html模板，绑定字段，然后通过像ui-router这样的东西粘合它们，但我正在考虑构建一些更动态的东西，可以在不首先创建模板的情况下呈现数据。我不确定这是否可行，甚至不是一个好主意，但这是我的问题。是否存在可以基于数据模型构建这些部分模板的东西（我的偏好是运行时但设计时间也很好）？

提前致谢。

Answer 1

这可以做到。请参阅此链接 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"}
    ]
  };
}

从动态数据生成AngularJS UI模板

1 个答案: