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

Question

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

这是我的 Controller :

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-repeat 吗？如果是的话，具体如何？

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

提前致谢! :)

附注--> JSFiddle - https://jsfiddle.net/jevccgxw/1/

Answer 1

在我的应用程序中进行测试后，此指令将适合您:

//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>

这里有一个可用的 fiddle ，修复了一些错误并添加了一项服务: https://jsfiddle.net/gy6kqq5w/

希望这可以帮助你，有任何问题请告诉我:)