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

How do I Stop Angular from Clearing the Text Selection?

本文关键字：选择 文本 清除 何阻止 Angular      更新时间：2023-09-26

我试图每隔几秒钟渲染和刷新一个复杂对象的列表使用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>

由于每次刷新都要大量替换itemList, angular别无选择，只能在ng-repeat中重新创建所有元素，如果你不介意丢失选择，而且刷新不是太大、太昂贵的话，这是可以接受的。为了防止这种情况的发生，你可以尝试在工厂中编写一个merge，将之前的引用与新的引用区别开来，并在不替换整个引用的情况下添加/删除项目。只有当您选择的项目不再存在时，您才会失去选择。

同样，如果列表很长，刷新与刷新之间的差异很小，那么这可能会更有效。

$interval刷新整个DOM，所以选择被刷新，新的值将出现。如果你想选择然后取消特定时间的间隔$interval.cancel(milliseconds)然后重新启动计时器与选定的范围。

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

我明白了。托尔的回答是正确的。问题是我没有在我的ng-repeat上使用"track by FOO"，所以它没有办法知道我的复杂对象的实际情况中的元素是相同的，因此它重新绘制了它们

相关文章：