Compile hidden elements in angular [duplicate]

Question

I have a directive with an ng-repeat that outputs a list. When hover over one of the items, a tooltip will be displayed.

The problem is that the "hover" text isn't compiled, and is displayed as a normal string: "test".

How do I go about compiling it?

Thanks

    $scope. items = [{
                name: "Test1",
                type: 0,
                hover: "<h4>test</h4>"
    }];

   <li ng-repeat="item in items">

       <div ng-if="activeItemIndex === $index">
           <div>{{item.hover}}</div>
       </div>

    </li>

Slava.K · Accepted Answer · 2017-01-18 10:02:03Z

1

Angular escapes html by default. To render variable value as it is use ng-bind-html directive:

<div ng-if="activeItemIndex === $index">
   <div ng-bind-html="item.hover"></div>
</div>

answered Jan 18, 2017 at 10:02

Slava.K

3,0803 gold badges19 silver badges28 bronze badges

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

2 Comments

Pankaj Parkar Over a year ago

It would need ngSanitize module as well..

BlackMouse Over a year ago

It works! Thanks a lot!

Collectives™ on Stack Overflow

Compile hidden elements in angular [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related