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

我目前正在开发Angular1应用程序。我从API获取数据，在promise resolve success中，我首先指定不同的值，其中一些值将在视图中使用，然后，我调用一个函数来操作特定文本，为句子的一方添加边框和背景色。我使用document.getElementById获取标签，然后使用label.innerHTML.replace

但是，replace函数不起任何作用。并且该视图不显示{{text}的值。仅当我使用1秒的超时时，它才起作用：replace函数起作用，视图文本用边框和背景色更新

具有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);
    });
  }

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);

视图：

---

有没有人知道如何在没有超时的情况下做这件事，因为我认为这是一种非常粗糙和丑陋的方式

将标签元素传递给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);
    });
  }

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);

---

“匹配文本”是通过ajax还是其他动态方式获取数据的？您可能正在覆盖您的更改…这是我在$scope.textlanalysis中的承诺中设置的$scope.text变量上面的代码按原样工作，但我需要一个不带setTimout的选项。替换只适用于setTimeout，但我认为这不是最好的方法。看起来我没有正确阅读。看起来您必须等待更好的解决方案：