Angular JS Bind Variable with Directive as Content

Question

In my application I have a which I am using to keep a log of events.

It is currently using ng-sanatize as such:

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

This works great. I am able to pre-pend eventLog with a HTML message and have it output in the div.

I would like to upgrade this div to allow me to pass in directive that I am using to show a full event trace in another area of the application.

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

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

Which outputs

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

I thought that I should be able to simply write

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

or even

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

and have everything work. This appears to not be the case.

I tried playing around with a directive that would compile the code based on the solution in another question (How to make ng-bind-html compile angularjs code) in a jsFiddle, but have been unable to figure out how to get this to work.

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

Can anyone point out what I am doing wrong?

I don't necessarily need to build the html in JS. I have the logEvent directive in use in another place in my application, and wanted re-use it. I am not against changing my approach if I am trying to tackle this problem incorrectly. — stats, Jun 09 '15 at 13:53
Then, could you use the directive directly instead of ng-bind-html ? — Okazari, Jun 09 '15 at 13:59

Okazari · Accepted Answer · 2015-06-09T16:13:19.000

Found out what was wrong, here is the updated fiddle :

Instead of this

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

Put this :

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

Why ? In an angular directive when you pass a parameter it will be interpreted by angular. You need to pass it like this value="somethingAngularWillInterpret".

When angular interpret a value, he will use the scope service to find this value. You don't have to use $scope into your html.

Last point : Using {{}} is for making angular interpret codes. In HTML text elements "value" mean the text "value". {{value}} means "show the value of the var "value""

Hope it helped

score 1 · Answer 2 · answered Jun 09 '15 at 13:50

1

Try to pass value without interpolating it (also without scope):

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

See this fiddle

answered Jun 09 '15 at 13:50

eladcon

5,815
1
16
19

score 0 · Answer 3 · answered Jun 09 '15 at 14:00

Since you r passing value from your controller directly like this

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

you can just remove scope from directory

scope: {
      value: '='
    },

working jsfiddle

Angular JS Bind Variable with Directive as Content

3 Answers3