Question

在我的应用程序中，我有一个用于保存事件日志的文件。

目前正在使用ng-sanatize：

<div ng-bind-html="{{eventLog}}></div>

这很有效。我可以使用HTML消息预先挂起 eventLog 并将其输出到div中。

我想升级这个div以允许我传递我用于在应用程序的另一个区域中显示完整事件跟踪的指令。

anEvent = { type: "Event", message: "A long event message" }    

<logEvent event="{{anEvent}}"></logEvent>

哪个输出

<div class="event">Event</div>
<div class="message">A long event message</div>

我以为我应该能够简单地写

eventLog = "<logEvent event=\"' + customEvent + '\"></logEvent>"

甚至

eventLog = "<logEvent event=\"{{customEvent}}\"></logEvent>"

让一切顺利。情况似乎并非如此。

我尝试使用一个指令，该指令将基于jsFiddle中另一个问题（How to make ng-bind-html compile angularjs code）中的解决方案编译代码，但一直无法弄清楚如何使其工作。

有谁可以指出我做错了什么？

Answer 1

发现错误，这里是更新的fiddle：

而不是这个

 Hi There! <complex value='{{$scope.value}}'></complex>

把这个：

 Hi There! <complex value='value'></complex>

为什么？在传递参数时，在角度指令中，它将由角度解释。你需要传递它，就像这个值=“somethingAngularWillInterpret”。

当angular解释一个值时，他将使用范围服务来查找此值。您不必在您的html中使用$ scope。

最后一点：使用{{}}用于制作角度解释代码。在HTML文本元素中，“值”表示文本“值”。 {{value}}表示“显示var”值的值“”

希望有所帮助

Answer 2

尝试传递value而不进行插值（也没有范围）：

$scope.textVar = "Hi There! <complex value='value'></complex>"

请参阅此fiddle

Answer 3

因为您直接从控制器传递值

$scope.value = { hello: "Hello", world: "World!" };
$scope.textVar = "Hi There! <complex value='{{$scope.value}}'></complex>";

您可以从目录中删除范围

scope: {
      value: '='
    },