AngularJS-显示REST API中的嵌套项

我正在从事一个公文包项目，该项目使用REST后端向AngularJS前端提供JSON。下面是我正在发送的JSON对象的一个示例，其格式为可读性

    "fields": 
    {
        "description": "This is a test tree for JSON serialization",
        "name": "Test tree 1",
        "techniques": [1,2]
    },
    "pk": 1,
    "model": "dominion.tree"

我是Angular的新手，所以我遇到了一些问题，试图展示与此树相关的技术

目前，我有一个名为tree的指令，它将提取JSON数据并使其可供使用和显示。嵌套在其中，我有一个ng repeat，它遍历树中的每个技术id，并调用一个技术指令，该指令将id作为参数，从数据库中提取该技术

tree.html

<trees>
    <div ng-repeat="pk in jsonstuff">
        {{pk.fields.name}}
        <div ng-repeat="technique in pk.fields.techniques">
            <technique idnum='{{technique}}'>
                {{techniqueJSON}}
            </technique>
        </div>
    </div>
</trees>

{{pk.fields.name}
{{techniqueJSON}}

技术指令

.directive("technique", function(){
    return{
    scope: {id: '@idnum'},
    transclude: 'true',
    controller: function($scope, $http, $attrs) {

    techniqueJSON = {}
    urlstuff = 'http://localhost:8000/dominion/api/techniques/' + $scope.id
        $http.get(urlstuff).
    success(function(data, status, headers, config) {
        techniqueJSON = data
    }).
    error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    });
    },
    controllerAs: 'techniqueCtrl',
    template: '<ng-transclude></ng-transclude>'}
})

指令（“技术”，函数（）{ 返回{ 作用域：{id:'@idnum'}， 排除：'正确'， 控制器：函数（$scope、$http、$attrs）{ techniqueJSON={} urlstuff=http://localhost:8000/dominion/api/techniques/'+$scope.id $http.get（urlstuff）。 成功（函数（数据、状态、标题、配置）{ techniqueJSON=数据 }). 错误（函数（数据、状态、标题、配置）{ //发生错误时异步调用 //或服务器返回带有错误状态的响应。 }); }, controllerAs:“techniqueCtrl”， 模板：'} }) 我不想在模板中使用techniqueJSON信息，因为根据该指令在应用程序中的位置，它可以显示不同的数据子集。我的解决方案是尝试在指令标记内的HTML绑定中访问techniqueJSON对象

这似乎不起作用，我相信这是因为{{technology}}绑定需要隔离作用域才能正确评估，而不是设置为未定义或以/dominion/api/technologies/{technology}的形式传递

自上而下，我的问题如下：

• 从RESTAPI的角度来看，仅仅引用树中技术的主键是正确的决定，还是应该在请求树时将技术信息与树一起序列化

• 有没有更好的方法从角度调用此信息，而不是使用单独的指令？（即，为树的$http.get中的技术调用循环的$http.get（））

• 有没有更好的方法在单独的指令之间传递ID号，这意味着我可以避免使用隔离作用域

谢谢您的时间。

检查此工作演示：。我在演示中使用了

user

作为模型对象

创建一个工厂

UserFactory

并公开两个函数

ids

和

user

。任何想要获取用户数据的指令/控制器都可以注入此工厂并调用API

我还更正了代码中的一些错误，例如

techniqueJSON={}

应该是

$scope.techniqueJSON={}

注意：我使用模拟

$http

调用

仅引用主键。。。 对。每个项目的显示都应由

技术

指令独立控制

有没有更好的方法从角度来获取这些信息。。。 我总是建议将

数据获取

逻辑提取到

服务

/

工厂

。这更容易维护。此外，数据可以缓存并跨不同的控制器/指令重用

这种

工厂

充当前端的

模型库

有没有更好的方法在单独的指令之间传递ID号，这意味着我可以避免使用隔离作用域？ 可以使用隔离作用域。隔离作用域的功能是使您的指令独立。因为隔离作用域没有通过原型继承连接到其他作用域。它确保指令之外的更改仅通过绑定影响指令。反之亦然

---

更新 如果您想使指令的内容更灵活，可以使用

transclude:true

。但是

transclude:true

的设计与隔离范围无关Angular为

transcluded

内容创建一个新范围。此作用域是隔离作用域的同级。因此转包内容无法访问隔离作用域上的值

例如，假设我们有一个指令

modal

。该指令只关心弹出窗口、背景、关闭、位置等。但是在

模式

中，我们可以通过

transclude:true

输入任何内容。此内容不应与指令

modal

有关

还有另一种方法可以实现您的目标：

将

templateUrl

指定为函数，该函数根据某些输入参数返回模板名称：

templateUrl: function (elem, attrs) {
    return 'template-' + attrs.tpl + '.html';
}

使用时：

<technique idnum='{{id}}' tpl="a"></technique>
<technique idnum='{{id}}' tpl="b"></technique>

---

通过这种方式，您可以使用不同的模板呈现相同的

技术JSON

。

这是一个非常棒的答案，谢谢。在我上面使用的示例中，我希望使用{{techniqueJSON}}中的内部HTML来访问由引入的数据。这样做的原因是能够根据我所处的位置显示不同位的techniqueJSON数据。您是否建议我在每次调用相同的工厂数据并更改其模板时都单独发出指令？我不知道您可以使用函数作为templateUrl，这正是我所需要的。一头扎进这件事并不容易，所以你的帮助是无价的！再次感谢。很高兴能帮忙。我的荣幸。