Question

我正在从保存为varchar的数据库中获取前端javascript代码的HTML内容。它存储在一个名为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变量中的字符串内容的情况下执行此操作？

Answer 1

一些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>次调用将是一种非常直接的方式来获取这些变量：

$watch

虽然我对角度没有经验，但我不确定HTML是否会以这种方式自动更新。如果没有更新，而不是函数，则可能必须使用另一个范围变量并vm.htmlContent <div class="card-title" [ngStyle]="{'color':shayari.color}"> {{shayari.title}} </div>变量来更新它。

Answer 2

使用替换

尝试这种方式

    
    
  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>

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

2 个答案: