我需要使用AngularJS从JSON文件创建HTML元素

Question

我知道这个问题还有其他答案，但我需要以特定的方式来回答。我已经开始了，我快到了，但需要一些建议。

这是我的控制器：

angular.module('dynamicForm.home-ctrl',[])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider.when('/', {
                templateUrl: 'app/home/home.html',
                controller: 'HomeController'
            })
        }])
        .controller('HomeController', ['$scope','$http', 'fileName', function($scope, $http, fileName){
            $http.get(fileName)
                .then(function(response){
                    $scope.content = response;
                });
        }])

JSON字符串包含如下元素：

  [
    {
      "id": "1",
      "title": "First Name",
      "summaryTitle": "First Name",
      "sort": "100",
      "paramName": "fname",
      "type": "text",
      "image": "icon-Profile",
      "placeholder" : "ex. John",
      "required": true
    },
    {
      "id": "2",
      "title": "Last Name",
      "summaryTitle": "Last Name",
      "sort": "200",
      "paramName": "lname",
      "type": "text",
      "placeholder" : "ex. Smith",
      "required": true
    }
  ],

这是我的自定义指令->

.directive('dynamic-tag',[function() {
        var getTemplate = function (tag) {
            var template = '';
            if (tag.type === 'text') {
                template += angular.element(tag.title + '<br />' + '<input type="'
                    + tag.type + '" id="'
                    + tag.id + '" title="'
                    + tag.summaryTitle + '" name="'
                    + tag.paramName + '" placeholder="'
                    + tag.placeholder + '" required="'
                    + tag.required + '" /><br />');
            }
            return template;
        };
}]);

因此，我假设如何在模板中使用这个自定义标记，以便将每个新元素呈现为html元素。我应该用ng重复吗？如果是，怎么重复？

如果可能的话，尽可能让你的答案接近我的逻辑。

提前感谢！：）

p.S.-->JSFiddle-https://jsfiddle.net/jevccgxw/1/

Answer 1

在我的应用程序中测试后，这个directive将为您工作：

//the directive 
.directive('dynamicTag', ['$compile',
    function($compile){
        return{
            restrict: 'A',
            scope: {
                tag: '='
            },
            link: function(scope, element, attrs){
                var getTemplate = function() {
                    var template = '';
                    if (scope.tag.type === 'text') {
                        template =  '{{tag.title}}' + 
                                    '<br />' + 
                                    '<input type="{{tag.type}}" ' +
                                    'id="{{tag.id}}" ' +
                                    'title="{{tag.summaryTitle}}" ' +
                                    'name="{{tag.paramName}}" ' +
                                    'placeholder="{{tag.placeholder}}" ' +
                                    'required="{{tag.required}}" ' +
                                    '/><br />';
                    }
                    return template;
                };
                var compile = function() {
                    var template = getTemplate();
                    element.append(template);
                    $compile(element.contents())(scope);
                };
                compile();
            }
        }
}]);

//in the html code:
<div ng-repeat="tag in content" dynamic-tag tag="tag"></div>

一个正在工作的小提琴在这里，修复一些错误并添加服务：https://jsfiddle.net/gy6kqq5w/

希望这能帮助你，让我有任何问题plz：）