Question

我尝试使用Angular每隔几秒渲染和刷新一个复杂对象列表。我发现的一个问题是，当刷新发生时，即使特定的HTML子组件没有更改，HTML也会更新，如果您选择了某些文本（例如，您试图复制它）选择消失了。

我知道更改包含选择的html存在一个普遍问题，但我想知道Angular是否能解决我不知道的问题。基本上我正在寻找的只是实际更改的HTML。如果我在jQuery中手动编写视图代码，我可以这样做，但手动执行它的其他任何部分都很糟糕

JS：

angular.module('items', [])
.factory('itemList', ['$http', function($http) {
  var items = [];
  var refresh = function() {
    // imagine that this makes an HTTP call to get the new list
    // of items
    items.length = 0;
    for (var i = 0; i < 10; i++) {
      items.push("item " + Math.random(1, 10))
    }
  }
  refresh();
  return {
    items: items,
    refresh: refresh
  };
}]);


var app = angular.module('app', [
  'items'
]);

app.controller('ItemListController',
  ['$scope', 'itemList', '$interval',
  function($scope, itemList, $interval) {
    this.items = itemList.items;
    $interval(itemList.refresh, 2000)
  }
]);

HTML：

<body ng-app="app">
<div ng-controller="ItemListController as controller">
  <h3>Items</h3>
  <div ng-model="active">
    <div ng-repeat="item in controller.items">
        <div class="header">Header</div>
        <div>{{item}}</div>
        <hr/>
    </div>
  </div>
</div>

</body>

Answer 1

当你在每次刷新时批量替换itemList时，angular没有选项，只能重新创建ng-repeat中的所有元素，如果你不介意丢失选择并且刷新不是太大而且贵。为了防止这种情况，您可以尝试在该工厂中编写一个合并，将前一个版本与新版本区分开来，并添加/删除项目而不替换整个引用。然后，只有当您选择的项目不再存在时，您才会失去选择。

此外，如果列表很长并且从刷新到刷新的差异很小，那么这可能会更有效。

Answer 2

$ interval刷新整个DOM因此刷新选择并显示新值。如果要选择然后取消特定时间间隔$ interval.cancel（毫秒），则重新启动具有所选范围的计时器。

$scope.$watch("refresh", function(){
           $interval.cancel(5000);
          p = $interval(itemsList.refresh(), 2000);
        })

Answer 3

我明白了。 Thor的回答是在正确的轨道上。问题是我没有在我的ng-repeat上使用“FOO的跟踪”，所以它无法知道我的实际情况中复杂对象的元素是否相同，因此它重新绘制了它们

如何阻止Angular清除文本选择？

3 个答案: