DOM 通过 angular-selectize ng-repeat 和 track by 不断重建

Question

我将 AngularJS 与 angular-selectize 模块一起使用。

要使用我需要的元素填充页面，我使用如下内容：

index.html

<selectize
    ng-repeat="select in selects_data track by $index"
    config="selectizeConfig"
    options="select.options"
    ng-model="selects_models[select.name]">
</selectize>

controller.js

$scope.update_data = function(){
    //I'm using AngularJS resource to get the JSON data from the server
    $scope.selects_data = StatesTableControl.get({'path': $scope.element.path},
        function(data){
            //Success
            angular.forEach(data, function(item){
                $scope.selects_models[item.name] = item.current_id
            });
        }, function(error){
            //Error
        }
    );
};

$scope.update_data();
$interval($scope.update_data, 3000);

无论我使用track by $index、track by select.name还是根本不使用，每次使用从服务器获取的数据更新selects_data数组时，所有<selectize></selectize>元素都会完全重绘, 即使更新后数组内容相同。

我还没有找到任何方法来自己解决它。 而且我不明白为什么当我在 div 或其他元素中使用 track by 时，它会起到同样的作用。

如果有人可以帮助解决这个问题，我会非常高兴！

Answer 1

我认为这与您跟踪项目的方式没有任何关系。如果StatesTableControl.get 每次调用它都返回新对象，我认为 Angular 认为它们是不同的对象，即使它们包含相同的数据。

您可以只发送已更改的对象，或维护对象的版本号，以便您了解未更改的对象并且无需替换它们。