如何在 ng-bind-html 中渲染角度变量的内容答案

【问题标题】：How to render the contents of angular variables inside ng-bind-html如何在 ng-bind-html 中渲染角度变量的内容
【发布时间】：2018-03-07 06:13:27
【问题描述】：

我正在将 HTML 内容从保存为 varchar 的数据库中提取到前端 javascript 代码中。它存储在一个名为vm.htmlContent 的变量中，然后我想在我的网页中再次将此字符串类型的 HTML 内容显示为 HTML。我使用ng-bind-html angular 指令来执行此操作。我存储在vm.htmlContent 变量中的 HTML 内容是：

<p> Date: </ p> <p> Time: </ p> <p> Venue: </ p>

当前的 javascript 代码如下所示：

<ng-bind-html
    ng bind-html="vm.htmlContent">
 </ng-bind-html>

网页中的输出是：

Date:
Time:
Venue:

我想在ng-bind-html. 中添加其他角度变量的日期、时间和地点。日期、时间和地点变量是vm.date、vm.time 和vm.venue，它们清楚地保留了相关数据。 有没有办法做到这一点，而不会在vm.htmlContent 变量中吐出字符串内容？

【问题讨论】：

这里有必要使用htmlContent 变量吗？除非我遗漏了什么，否则您似乎可以使用“日期：”、“时间：”等呈现其他三个变量。自己发短信
html 内容取自数据库，并存储在vm.htmlContent 变量中。我不能自己在 javascript 代码中键入文本。它必须来自数据库并且为了存储它我使用vm.htmlContent 变量。这就是它的用法

标签： javascript html angularjs ng-bind-html ng-bind

【解决方案1】：

用替换试试这个方法

    
    
  angular.module("myApp", []).controller("myCtrl", function($scope,$sce) {
  $scope.date="03/07/2018";
  $scope.time="1.00 PM";
  $scope.venue="US"
  $scope.myTexts = "<p> Date: </ p> <p> Time: </ p> <p> Venue: </ p>";
  var replacedData =  $scope.myTexts.replace("Date:","Date:" + $scope.date).replace("Time:","Time:" + $scope.time).replace("Venue:","Venue: " + $scope.venue);
  $scope.myText = $sce.trustAsHtml(replacedData);      
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="myCtrl">    
        <p ng-bind-html="myText"></p>    
 </div>

【讨论】：

【解决方案2】：

一些.replace() 调用将是获取这些变量的一种相当直接的方法：

vm.getReplacedContent = () => {
  return vm.htmlContent
    .replace('Date:', `Date: ${vm.date}`)
    .replace('Time:', `Time: ${vm.time}`)
    .replace('Venue:', `Venue: ${vm.venue}`)
}

<div ng-bind-html="vm.getReplacedContent()"></div>

虽然我对 Angular 没有经验，但我不确定 HTML 是否会自动更新这种方式。如果它没有更新，而不是函数，您可能必须使用另一个范围变量和$watch vm.htmlContent 变量来更新它。

【讨论】：

与我提供的使用角度完全相同的想法