当数据准备就绪时使用ng-repeat

Question

我有一个网站，包括两个网页：

1. 设置页面：该页面包含以下JSON内容：

   {"Sources":["1","2","3","4"]}

2. 显示系统中所有已知的“资源”网页。只需逐一打印它们。

当我的应用程序加载时，我下载资源页面，并将其保存在$scope.Settings.Sources的作用域中。

我的AngularJS代码:

$scope.getSettings = function (ID, successCallback, failureCallback)
{
    $scope.ID = ID;

    $http.get("/sources?ID=" + ID).then(function (response)
    {
        if (response.status == 200)
        {
            $scope.Settings = response.data;
            successCallback();
        }
        else
        {
            failureCallback();
        }
    });
}

function getSettings_success()
{
    // Ready to update the ng-repeat NOW.
}

function getSettings_error()
{
    alert('Error');
}

$scope.getSettings(1, getSettings_success, getSettings_error);

现在，当我有$scope.Settings.Sources准备好之后，我所要做的就是在指定的HTML模板中打印每个来源。由于这个原因，我考虑使用ng-repeat来完成这项任务。大概像这样：

<div ng-init="sources=$scope.Settings.Sources">
    <ul>
        <li ng-repeat="source in sources">
            {{ source }}
        </li>
    </ul>
</div>

很不幸，这段代码无法运行。这是因为当页面正在加载时，$scope.Settings.Sources 还未准备好。所以，在“sources”页面下载后，ng-repeat必须运行。

这可行吗？如果可以，该如何实现？

- No1Lives4Ever

Answer 1

你不应该在这种情况下使用 ng-init，因为数据是通过 Ajax 获取的，并且你正在将空对象分配给源。原因尚未响应。相反，我会直接在视图中使用 Settings.Sources 变量。

<div>
    <ul>
        <li ng-repeat="source in Settings.Sources">
            {{ source }}
        </li>
    </ul>
</div>

注意: 在Angular指令内部，可以直接访问$scope变量，不需要显式地指定$scope

- Pankaj Parkar

---

这个可以工作。谢谢。但是我不明白它是如何工作的？ng-repeat 如何“知道”何时有数据在“Setting.Sources”中？ - No1Lives4Ever

@No1Lives4Ever 这已经被 Angular 的 digest 系统处理了。无论在 Angular 指令内绑定的变量是什么，它们的值都会在每个 digest 循环中进行评估（在 Ajax 完成后，Angular 运行一个 digest 循环并更新绑定）。 - Pankaj Parkar