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

【问题标题】：I need to create HTML elements from JSON file with AngularJS我需要使用 AngularJS 从 JSON 文件创建 HTML 元素
【发布时间】：2016-04-20 17:00:18
【问题描述】：

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

这是我的控制器：

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/

【问题讨论】：

你能在小提琴中得到这个吗？我想我能帮上忙……
是的，我会...在几分钟内将用 Fiddle 编辑问题
我刚刚完成并编辑了您可以检查的问题
看起来您可能在下面得到了正确答案。基本上和我打算做的一样，只是写的有点不同。我不确定 $compile 是关于什么的......我认为你可以不用。你搞定了吗？

标签： javascript jquery html angularjs json

【解决方案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/

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

【讨论】：