AngularJS ng-repeat在阵列更新时没有刷新

Question

我遇到一个问题，即当阵列发生变化时，ng-repeat不会更新列表。

我使用JavaScript承诺计算计算然后返回包含2个数组的对象。然后，这些数组将显示在以下代码段的视图中。

<button class="btn" data-toggle="modal" data-target="#tableModal" ng-click="vm.compareTables(vm.table)">Some text</button>
<!-- Modal -->
<div class="modal fade" id="tableModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{ vm.table.title}}</h4>
            </div>
            <div class="modal-body">
                <h4>You got</h4>
                <p ng-repeat="g in vm.got">{{ g }}</p>
                <h4>You dont:</h4>
                <p ng-repeat="d in vm.dont">{{ d }}</p>
            </div>
        </div>
    </div>
</div>

在控制器中，我将一个函数包装在一个promise中，它返回2个填充数组的正确答案。我也可以在控制器中打印结果，ng-repeat只是不更新​​视图。

var vm = this;

vm.compareTables = function (table) {
    getData().then(function succesCallback(response) {
        vm.ing = response.data;
        var r = table;
        var promise = pro(r, vm.ing);
        promise.then(function (data) {
            console.log(data.got);
            console.log(data);
            vm.got = data.got;
            vm.dont = data.dont;
        });
    });
}

上述承诺会返回正确的结果。

如果有帮助，我会使用角度1.6.1。控制器和视图连接到一个正常工作的组件。

更新

这是promise返回的控制台输出

Answer 1

包裹你的vm.got = .. in a $scope.$apply(function () { ... })以强制digest cycle。 Angular可能不知道您的承诺回调，因为您可能使用不同的promise/callback机制而不是角度原生机制（$http，$q，$resource）。

Answer 2

使用

$timeout(function () {
    vm.got = data.got;
    vm.dont = data.dont;
})

Answer 3

我希望这会对你有所帮助。请参阅此链接，如果不清楚，请观看此链接末尾的视频。 solve problem of ng-repeat

Answer 4

当你超出角度上下文时，你需要在promise回调中使用$ scope。$ apply（）方法来更新你的视图。