Question

我目前正在开发Angular1应用。我从API获取数据并在promise中解析（成功）我首先分配不同的值（其中一些将在视图中使用）然后，我调用一个函数来操作特定的文本（添加边框和背景） - 颜色到句子的一方）。我使用 document.getElementById 获取标签，然后使用 label.innerHTML.replace（..）。

但是，替换功能不起作用。并且视图未显示{{text}}的值。仅当我使用1秒的超时时它才有效：替换功能起作用，视图文本更新（带边框和背景颜色）。

具有hacky setTimeout（）的控制器代码：

$scope.getTextAnalysis = function () {
    IntentRequestService.analyzeText($scope.intentApp.id, $scope.intentvalue)
      .success(function (response) {
        $scope.results = response;
        $scope.text = $scope.results.text;
        highlightEntities($scope.results);
      })
      .error(function (e) {
        ErrorHandlingService.logErrors(e);
      })
  };

  function highlightEntities(results) {
    var text = results.text;
    var entities = results.entities;
    _.forEach(entities, function (entity, i) {
      var entity_value = text.substring(entity.start, entity.end);
      var color = randomColor({
        luminosity: 'light'
      });
      var borderColor = ColorLuminance(color, -0.3);
      $scope.entities[i].backgroundColor = borderColor;
      $scope.entities[i].color = color;
      var label = document.getElementById('match-text');
      setTimeout(function(){ label.innerHTML = label.innerHTML.replace(entity_value, '<span style="background-color:' + color + '; border: 3px solid ' + borderColor + ';" class="highlighted-entities">'+ entity_value + '</span>'); }, 1);
    });
  }

查看：

<p class="md-subhead">Sentence:</p>
<h3 id="match-text"><span>{{text}}</span></h3>

有没有人知道如何在没有超时的情况下做到这一点，因为我认为这是一种非常hacky和丑陋的方式呢？

Answer 1

将您的label元素传递给setTimeout调用的函数：

setTimeout(function(label) {
  label.innerHTML = label.innerHTML.replace(entity_value, '<span style="background-color:' + color + '; border: 3px solid ' + borderColor + ';" class="highlighted-entities">' + entity_value + '</span>');
}, 1, label);

elem.innerHTML仅在设置超时后可用

1 个答案: