带有 Angular ng-repeat 的 JavaScript array.push(对象)未按预期运行

Question

我在我的应用程序的其他区域中有几乎完全相同的代码片段，并且它工作得很好。

我将一个对象插入一个空数组并在我的 View 中有一个 ng-repeat。

JavaScript:

$scope.upload = $upload.upload({
    url: BASE + 'files/tasks',
    file: file,
    data: data
}).success(function(data) {
    for(var i = 0; i < $scope.case.task.notes.length; i++) {
        if($scope.case.task.notes[i].in_api === false) {
            $scope.case.task.notes[i].documents.push(data);
        }
    }
});

当我 console.log $scope.case.task.notes 将 JSON 响应添加到数组后，我看到了预期的结果(注释对象使用 documents 数组，返回的对象在 documents 数组中)。

在我看来，该页面具有以下 HTML，并使用 Angular 模板进行了扩充:

<div>
    <p class="chat-file row" ng-repeat="document in note.documents track by $index">
        <b class="pull-left col-sm-6">
            <i class="fa fa-file"></i> {{document.name}} 
        </b>
        <span class="col-sm-6 pull-right"> 
            <a href="http:/download.com?f={{document.id}}&n={{document.name}}" class="btn btn-xs btn-success">download</a> 
        </span>
    </p>
</div>

当我第一次加载页面时，所有包含文档的笔记都正确显示。但是，当从上面的 upload 函数调用成功函数并将文档推送到笔记数组时，它不会出现在 View 中。

如果它有所不同，上面的 HTML 也包含在 ng-repeat 中，它迭代每个音符(因此它是多层次的)。

可能是什么问题？ JavaScript 函数正常运行，但 View 未在模型更新时更新。

Answer 1

尝试使用 $scope.$apply() 告诉您的 View 范围数据已更改:

 .success(function(data) {
     // Do what you want.
     $scope.$apply();
 });

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life-cycle of exception handling, executing watches.