如何在Angularjs中重新呈现带变量的字符串

Question

我有一些字符串要注入Angularjs App中的元素，但是该字符串中包含一些变量，在将其注入元素之前需要先替换它，或者某种过滤器告诉Angular重新渲染该元素元素，因为我们有一些尚未渲染的变量。

var string = "Hi my name is <a href="{{url}}">{{username}}</a>";

现在，当我将其注入HTML时，我就像这样

https://webmaker.org/%7B%7Blang%7D%7D/privacy

Hi my name is <a href="%7B%7Burl%7D%7D">%7B%7Busername%7D%7D</a>

我相信这需要以某种方式重新渲染？

---

抱歉缺少上下文。

所以这是myapp.html

<span ng-bind-html="'string' | i18n">

这里正确输出HTML，但是因为string变量中也包含一些变量而且它没有正确呈现（不是HTML部分，不是渲染，而是变量）。< / p>

Answer 1

您无法在Javascript中使用{{}}。 你的JS应该阅读

$scope.url = "http://example.com";
$scope.name = "Link name";

HTML：

<a href="{{url}}">{{name}}</a>

你应该真正查看tutorial以强化你的角色知识

编辑：

抱歉，现在我重新阅读你的问题并理解。使用ng-html-bind（您需要1.2.x或更新版本）

例如

<div ng-html-bind="string"></div>

鉴于该字符串是$scope变量。 请参阅docs

Answer 2

试试这个

var string = 'Hi my name is <a href="' + url + '">' + username + '</a>';

Answer 3

<span ng-bind-html="'string' | i18n">

使用ng-bind-html创建一个绑定，将innerHTML以一种安全的方式将表达式计算到当前元素中。

在字符串中使用$ scope变量会使其不安全，所以你应该使用$sce.trustAsHtml但这次你的字符串中的变量不能绑定，因为它们不会被编译......

基本上你应该编译你的字符串以绑定你的变量。这里有自定义指令，您可以创建一个可以替换为ng-html-bind ...

的指令

这是我的PLUNKER