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
– stats, Commented Jun 9, 2015 at 13:53
Then, could you use the directive directly instead of ng-bind-html ? — Okazari
– Okazari, Commented Jun 9, 2015 at 13:59

Okazari · Accepted Answer · 2015-06-09 16:13:19Z

1

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

edited Jun 9, 2015 at 16:13

answered Jun 9, 2015 at 13:50

Okazari

4,5971 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eladcon · Accepted Answer · 2015-06-09 13:50:44Z

1

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

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

See this fiddle

answered Jun 9, 2015 at 13:50

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Comments

Bijay Rai · Accepted Answer · 2015-06-09 14:00:27Z

0

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

answered Jun 9, 2015 at 14:00

Bijay Rai

9591 gold badge12 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular JS Bind Variable with Directive as Content

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related