javascript - 在 AngularJS 指令中加载数据

Question

我在 Angular 中有一个指令，它从 $scope 中的数组进行更新，并通过 ng-repeat 填充其数据:

<div ng-repeat="(key, value) in items">
    ...
    <div>{{value.personid}}</div>
    ...
</div>

正如你在数组中看到的，我有一个 personid，我想要做的是从 Angular 背后工作的 api 获取相应人员的姓名。我不知道如何解决这个问题。我确实有几个想法:

1. 创建一个过滤器，将 personid 作为输入传递，并对 api 进行 AJAX 调用以获取名称。但这会需要对服务器进行大量调用，而且我不确定是否应该以这种方式使用过滤器。

2. 当我在 Controller 中创建数组时，在将值分配给 $scope 之前对其进行迭代并进行所需的调用，然后将它们显示在 View 中。

这两种解决方案都非常密集，所以哪一种更好，或者还有更好的方法吗？

Answer 1

嗯，最简单的方法是将完整的修饰对象传递给指令。确保 $scope.items 如下所示(示例):

[
    {
        id: 12,
        name: 'John'
    },
    {
        id: 83,
        name: 'Mary'
    },
    {
        id: 92,
        name: 'Jane'
    },
]

现在您可以像这样循环用户对象:

<div ng-repeat="user in items">
    ...
    <div>{{ user.name }} has id {{ user.id }}</div>
    ...
</div>

将打印出来

John has id 12
Mary has id 83
Jane has id 92

简单易行!

编辑再次阅读您的问题；据我所知，您仅在 Controller 中拥有可用的 ID 吗？在这种情况下，您只有两个选择:触发搜索查询并传递所有 ID，并让服务器返回完整的用户对象。这只会花费您一次 xhr 调用。否则，嗯，是的，您确实需要为每个用户发出调用......我会不惜一切代价避免这种情况。