Wait to render until a child element is defined

[mikcox]

Hello,

I'm trying to place a highcharts directive (highcharts-ng) inside of an ng-repeat, and then destroy any of ng-repeat's watchers on the data series of the chart. To do this, I create a highchartConfig object on the scope, which is passed to the highcharts-ng directive (though it doesn't yet have any data in it), and I'm putting a bindonce attribute on that config object that's being given to the highcharts-ng directive. The problem is that bindonce tries to render the highchart at the instant that the highchartConfig object exists (when it's still waiting on data), and then won't update again once I've gotten my data back and added it to the highchartConfig object.

My basic workflow is that I want to:

1. create the highchartConfig object
2. pass the config object to the highcharts-ng directive
3. assign the data array to the highcharts config object
4. update the dom
5. destroy all watchers on the highchartsConfig object.

I know that the high level bindonce directive will wait on a given object to become defined before rendering that object's children, but is it possible to also have it wait on a given child object to be defined before rendering the div with a passed parent as an attribute?

For instance:

<div bindonce="highchartConfig.series.data">
    <highchart bo-attr bo-attr-config="highchartConfig"></highchart>
</div>

Could we wait to render the highchart element until highchartConfig.series.data is defined?

Cheers!

[Pasvaz]

I'm not sure to understand, but in theory inside the bindonce attribute you can use an expression which get defined when all your objects are defined.