如何根据 AJAX 结果生成 Angular 嵌套的 DOM 元素？

Question

我是 Angular 的新手，所以请对我温柔一点！我正在查看基于 AJAX 响应呈现子部分 DOM 元素，我该如何在 Angular 中实现以下内容？

在页面加载时，控制器返回 headers 部分的列表：

单击这些部分（红色）中的任何一个都会显示一个子部分列表（蓝色），每个蓝色 header 都可以单击以显示另一个列表（黑色），记住我只想要显示每个 section/subsection/sub-subsection header 的 immediate-child 部分，请单击：

我已经有了要用于其中每一个的模板代码，但是我该如何将这些模板组合在一起呢？

从环顾四周我得到的印象是我应该为该部分创建一个指令，sub-section 和 sub-sub-section（是吗？），然后我可以将模板绑定到HTTP 服务调用的结果？即扩展为上面的详细屏幕截图：

<div area="PSED">
    Personal, Social and Emotional Development
    <div aspect="MH">
        Making Relationships
        <div goal="BLAH">
            <input type="checkbox"> Blah, Blah, Blah
        </div>
    </div>
</div>

我希望通过返回尽可能少的数据并由用户填充部分 as-required 来减少页面加载时间。

我希望这是一个合理的问题，因为我找不到任何证明我需要的东西（也许我对 ng 的无知导致我在搜索中遗漏了一个重要的关键字）。

提前感谢您提供的任何建议。

安迪

Answer 1

如果我理解这个问题，您是在尝试在 ajax 调用后将节点动态添加到树状结构。您可以结合使用 ng-include 和递归模板来执行此操作。这是一个粗略的示例，其中不包括折叠节点的逻辑，但我认为它可以理解这个想法。

查看：

<script type="text/ng-template"  id="tree_item_renderer.html">
     <span ng-click="add(data)">{{data.name}}</span>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'">           
        </li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

控制器：

angular.module("myApp", []).
controller("TreeController", function($scope, $http) {     
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;

        //make your call here and set your child node data
        //$http.get('...').then(function(res){
        //   data.nodes.push({name: newName,nodes: res.data});
        //});

        //test data
        data.nodes.push({name: newName,nodes: []});

    };
    $scope.tree = [{name: "Top Node", nodes: []}];
});

工作 jsFiddle：http://jsfiddle.net/nfreeze/c9mrhxf2/1/

如何根据 AJAX 结果生成 Angular 嵌套的 DOM 元素？

How do I generate nested DOM elements based on an AJAX result in Angular?

html

ajax

angularjs

angularjs-directive

angular-services