AngularJS：深度對象修改后視圖未更新

Question

我有這個html代碼：

<table class="table table-striped table-condensed table-hover">
    <tbody>
        <tr ng-repeat="doc in container.Documents ">
                {{doc.Status.Message}}
            </td>
            <!-- .... -->
        </tr>
    </tbody>
</table

和這個angularjs控制器：

(function (ng, app) {

    "use strict";

    app.controller(
        "my.DocumentsController",
        function ( $scope, $stateParams, MYContainer, $timeout ) {

            $scope.container = new MYContainer();            
            $scope.$watch('container', function (newVal, oldVal) {
                $timeout(function () {
                    $scope.$apply();
                }, 0);
            }, true);

            $scope.container.load($stateParams.Id);
    });
})(angular, my_app);

MYContainer的加載函數：

function load(id) {
    var scope = this;
    var deffered = $q.defer();
    containerService.getData(id, "true").success(function (data) {
        angular.extend(this, data);
        deffered.resolve();
    }).error(function (e) {
        deffered.reject('Error while loading container');
    });
    return deffered.promise;
}

問題是，每當我重新加載批處理（帶有修改過的container.Documents）時，它都不會在html視圖中顯示修改過的批處理。

我已經了解了有關角度監視的相等監視的內容，因此我在控制器中添加了監視功能，並且它確實檢測到監視功能中的修改，因此我調用了$ scope。$ apply（），但它在html中沒有變化。

如果我將200毫秒而不是0放在$ timeout調用中，則視圖將被更改。

Answer 1

您無需在此處使用任何觀察程序或$apply ，angular可以解決此問題並在數據更改時更新視圖。 而且，$ watchers在性能上是昂貴的，$ scope。$ apply是除非絕對必要的，否則建議避免的東西，此處不介紹。

$angular.extend不是深層副本 。 你可以在這里閱讀。

我建議您將代碼更改為此：

load($stateParams.Id).then(function(result) {
    $scope.container = result;
});

並刪除angular.extend(this, data); 從success回調。

還要刪除整個$watch部分，這是多余的。

Answer 2

在$ watch中調用$ timeout（0）或$ apply是沒有意義的，因為$ watch本身是由摘要調用的-調用$ apply的目的是觸發摘要。

相反，您希望在異步更改數據時（在這種情況下，當解決了負載承諾時）強制執行此摘要。