AngularJS 在用户操作之前绑定不会在页面上发生

Question

我有我的第一个 angular 应用程序，它通过 ng-repeat 显示列表中的一些数据。

视图的控制器将一些变量设置为范围 - 一些直接在函数中，另一个来自 API 调用。

函数加载中的数据显示在该 ng-repeat 中。来自服务调用的数据未显示（调试显示正在调用函数并且返回数据并在范围内设置）。

我有一个过滤器，如果我在其中输入任何内容，就会显示数据。或者，当我单击另一个视图时，数据会在加载新视图之前短暂地闪烁到页面上。

这是一些查看代码（项目有效，场地无效）：

<div ng-repeat="item in items">
{{ item.firstName }}
</div>
<div ng-repeat="venue in venues">
{{ venue.details }}
</div>

这是控制器（数据从调用返回）：

$scope.items = [
{ "firstName": "John", "lastName": "Doe" },
{ "firstName": "Anna", "lastName": "Smith" },
{ "firstName": "Peter", "lastName": "Jones" }
];

var client = new WindowsAzure.MobileServiceClient("url", "key");

var query = client.getTable("venues").read().done(function (results) {
            $scope.venues = results;
        }, function (err) {
            alert("Error: " + err);
        });

我想知道在从 API 返回数据之前是否可能发生绑定？

我在函数中添加了 div 和这一行，它正在将结果打印到页面上没有问题：

document.getElementById("venueslist").innerHTML = JSON.stringify(结果);

感谢您的阅读。

Answer 1

查看您的代码 client.getTable 看起来它没有使用任何 angularJs $http 或 $timeout 服务。因此，您必须将分配包装在 scope.$apply() 中，以便 $digest 周期为运行并且绑定在视图中更新。

    var query = client.getTable("venues").read().done(function (results) {
        $scope.$apply(function () {
           $scope.venues = results;
        });
    }, function (err) {
        alert("Error: " + err);
    });

旁注：你为什么要做JSON.parse(JSON.stringify(results))，如果它是json对象，你可以直接使用results。

AngularJS 在用户操作之前绑定不会在页面上发生

AngularJS binding not occurring on page until a user action

asp.net-web-api

angularjs

azure-mobile-services

angularjs-ng-repeat