javascript - 以指令作为内容的 Angular JS 绑定(bind)变量

Question

在我的应用程序中，我有一个用来记录事件的日志。

它目前正在使用 ng-sanatize:

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

这很好用。我可以在 eventLog 前添加 HTML 消息并将其输出到 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 ) 中的解决方案编译代码，但一直无法弄清楚如何让它工作。

https://jsfiddle.net/979mN/473/

谁能指出我做错了什么？

Answer 1

找出问题所在，这里是更新的fiddle :

代替这个

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

把这个:

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

为什么？ 在一个 Angular Directive(指令)中，当你传递一个参数时，它将被 Angular 解释。您需要像这样传递它 value="somethingAngularWillInterpret"。

当angular解释一个值的时候，他会使用作用域服务来找到这个值。您不必在 html 中使用 $scope。

最后一点:使用 {{}} 是为了制作 Angular 解释代码。在 HTML 文本元素中，“值”表示文本“值”。 {{value}} 表示“显示 var“value”的值”

希望对你有帮助