javascript - 如何在 ng-bind-html 中呈现 Angular 变量的内容

Question

我正在从保存为 varchar 的数据库中获取 HTML 内容到前端 javascript 代码。它存储在一个名为 vm.htmlContent 的变量中，然后我想在我的网页中再次将此字符串类型的 HTML 内容显示为 HTML。我使用 ng-bind-html Angular Directive(指令)来执行此操作。我存储在 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 中添加其他 Angular 变量的日期、时间和地点。 日期、时间和地点变量是 vm.date， vm.time 和vm.venue 并且他们清楚地保留了相关数据。 有没有办法在不将字符串内容吐到 vm.htmlContent 变量中的情况下做到这一点？

Answer 1

用replace试试这个

    
    
  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>