Get Angular to action ng-if in new elements generated by d3.js

Question

I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js

How can I get Angular to notice and work on these new elements and ng-ifs?

And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />

You might be looking for something like [this](http://krispo.github.io/angular-nvd3/#/). — area28, Jun 17 '15 at 12:19

score 1 · Answer 1 · answered Jun 17 '15 at 12:49

1

You have to wrap them with a scope. Maybe a Controller. I also suggests you to not use ng-if if you just want to hide/show them, since its expensive. You better use ng-show / ng-hide

Or maybe look for a solution like angular-nvd3

answered Jun 17 '15 at 12:49

Avraam Mavridis

8,288
18
73
125

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

You need to use the $compile service as suggested in this answer, though I would recommend using Angular to generate and insert <circle>. I wrote a blog post on D3 + Angular that you might find helpful.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 19 '15 at 16:23

Neil

2,127
16
24

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

ng-if is a directive, you can use this solution: How do I use angularjs directives in generated d3 html?

The only supposition is that you d3 is already in a directive.

edited May 23 '17 at 11:45

Community

1
1

answered Jun 19 '15 at 16:34

Raúl Martín

4,026
2
20
39

I was tempted to flag as duplicated but the concept that ng-if is a directive is not always clear. – Raúl Martín Jun 19 '15 at 16:35

Get Angular to action ng-if in new elements generated by d3.js

3 Answers3