將HTML元素追加到現有元素的AngularJS指令

Question

我有一個AngularJS ， JS ， JQ ， HTML5 Web應用程序，該應用程序能夠向我們項目的RESTful Web Service發送不同的HTTP方法，並以JSON接收響應。

看起來像這樣：

我想要的是創建一個AngularJS directive ，該AngularJS directive可以接受JSON對象，並為找到的每個JSON屬性創建一個<li> 。 如果屬性本身是對象，則應遞歸調用該函數。

基本上，我搜索一種將JSON對象解析為HTML元素的方式，其方式如下JSON：

{
    "title": "1",
    "version": "1",
    "prop" : {
         "a" : "10",
         "b" : "20",
         "obj" : {
              "nestedObj" : {
                   "c" : "30"
               } 
          }
     }
}

將轉換為以下html：

<ul>
    <li>title : 1</li>
    <li>version : 1</li>
    <li>
        prop : 
        <ul>
            <li>a: 10</li>
            <li>b: 20</li>
            <li>
                obj : 
                <ul>
                    <li>
                        nestedObj : 
                        <ul>
                            <li>c : 30</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

有誰知道如何使用AngularJS指令實現這一目標？ 每個有用的答案都受到高度贊賞和評估。

謝謝。

Answer 1

我通過遞歸包含指令來嘗試此操作。 但這看起來真的很丑。

我的解決方案就像使用遞歸方法生成的普通舊html並追加為元素一樣：

//recursivly generate the object output
scope.printObject = function (obj, content) {
    content = "<ul>";
    for (var i in obj) {
       if (angular.isObject(obj[i])) {
           content += "<li>"+i+""+scope.printObject(obj[i])+"</li>";
       } else {
           content += "<li>" + i + ":" + obj[i] + "</li>";
       }
    }
    content+="</ul>";
    return content;
 };

完整的工作代碼在這里：

http://jsfiddle.net/zh5Vf/1/

Answer 2

它與Angular無關（它是普通的舊JS），但有趣的是，這里有一條指令可以滿足您的要求：
（為了正確格式化HTML代碼（縮進）並支持自定義初始縮進，這要花一些時間。）

app.directive('ulFromJson', function () {
    var indentationStep = '    ';

    function createUL(ulData, indentation) {
        indentation = indentation || '';

        var tmpl = ['', '<ul>'].join('\n' + indentation);
        for (var key in ulData) {
            tmpl += createLI(key, ulData[key], indentation + indentationStep);
        }
        tmpl = [tmpl, '</ul>'].join('\n' + indentation);

        return tmpl;
    }

    function createLI(key, value, indentation) {
        indentation = indentation || '';

        var tmpl = '';
        if (angular.isObject(value)) {
            var newIndentation = indentation + indentationStep;
            tmpl += '\n' + indentation + '<li>' +
                    '\n' + newIndentation + key + ' : ' +
                    createUL(value, newIndentation) +
                    '\n' + indentation + '</li>';
        } else {
            tmpl += '\n' + indentation + '<li>' + key + 
                    ' : ' + value + '</li>';
        }

        return tmpl;
    }

    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        link: function postLink(scope, elem, attrs) {
            scope.$watch('data', function (newValue, oldValue) {
                if (newValue === oldValue) { return; }
                elem.html(createUL(scope.data));
            });

            elem.html(createUL(scope.data));
        }
    };
});

然后像這樣使用它：

<div id="output" ul-from-json data="data"></div>

---

另請參見此簡短演示 。