javascript - 将 HTML 元素附加到现有元素的 AngularJS 指令

Question

我有一个AngularJS , JS , JQ , HTML5 Web 应用程序，能够发送不同的 HTTP我们项目的方法RESTful Web Service并在 JSON 中收到回复.

看起来像这样:

我想要的是创建一个AngularJS directive ，可以接受 JSON对象并创建 <li>对于它找到的每个 JSON 属性。如果属性本身是一个对象 - 应该递归调用该函数。

基本上，我搜索一种解析 JSON 的方法以如下 JSON 的方式对象到 HTML 元素:

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