Angular dynamically inserted directive

Question

I build an app based on angular + ng-ui-bootstrap + ng-googleCharts

I want display google charts data table containing a ui.bootstrap popover in certain cell. I populate rows of table with data from database.

I fetch data with angular $resource service and then parse data with function, which also create html markup for ui.bootstrap popover with popover angular directive. But this popover don't work.

I suggest, that this is because data inserted to table needs to be recompiled by Angular. I searched web and found solutions to this with angular $compile service.

I found custom directive, called angular-html-bind, that recompile content of that directive element after each change of binded model, so one can dynamically bind other angular directive to view, but I don't know, how to use modus operandi from angular-html-bind in my data table.

I created plunker that describes my effort. Sadly, the angular-html-bind directive does not work in that plunker and I don't know why, but that Plunker contains all necessary modules.

Plunker HERE

Can YOU see any way to my desired goal (that is insert tooltip/popover inside data table cell).

koolunix · Accepted Answer · 2014-02-13 23:46:58Z

0

Your dynamic popover is not working because the directive google-chart has isolated scope, so I don't think this line is being correctly evaluated.

{v: $sce.trustAsHtml($scope.popover)}

answered Feb 13, 2014 at 23:46

koolunix

1,99516 silver badges25 bronze badges

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

1 Comment

Rudolf Gröhling Over a year ago

I'm not quite sure, that $sce.trustAsHtml has anything to do with that problem. I tried use $sce service as solution to my problem, but it neither work with it, as without it. AFAIK, $sce only prevent escaping, so if button is rendered as HTML button inside table, that value is not escaped. I need to parse that HTML code with Angular and I'm not sure, that proper $sce implementation will help that.

Rudolf Gröhling · Accepted Answer · 2014-02-15 21:12:25Z

0

Well, I backed up to obvious solution - don't use Google chart data table, but create classic bootstrap style HTML table and populate it with angular expressions.

I tried experimenting with google-chart, but anyway, it dont followed my mantra: KISS ("Keep It Sweet & Simple" - this time probably in form "Keep It Simple, Stupid!" :)

answered Feb 15, 2014 at 21:12

Rudolf Gröhling

4,8255 gold badges30 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular dynamically inserted directive

Plunker HERE

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related