AngularJS one-way binding on custom directive

Question

I am using AngularJS highcharts (https://github.com/pablojim/highcharts-ng)

I have this config and I need make sure it is only binded once. I looked up one-way binding on AngularJS and it says I need to use :: if I am using AngularJs 1.3(Which I am ). But I am not sure how to use it on a custom directive.

 <highchart config="configtemp"></highchart>

I tried something like but it doesn't work

 <highchart config=":: configtemp"></highchart>

Could you further explain what exactly "it doesn't work" means. As per my comment below, using :: will indeed prevent the value of the attribute config from changing, so if the highchart directive is gathering new config data, it's not from this scope value. — Dan
– Dan, Commented Apr 19, 2016 at 19:45

Dan · Accepted Answer · 2016-04-26 21:43:21Z

2

In this regard custom directives work the same as angular directives. AngularJS highcharts has an isolate scope as per:

scope: {
    config: '=',
    disableDataWatch: '='
  },

So it's scope will consist of the values assigned to those attributes in the html. Thus

<highchart config=":: configtemp"></highchart>

will mean that on the directive scope scope.config will be equal to ::configtemp. Since you have the '::' the value of configtemp will not change (better known as one-time binding) from it's first value as you suggested/expected. (Example of this in plunker form).

Highcharts does have some extra logic, but ultimately it's internal config is derived from this attribute/scope value.

Without further information, I cannot advise what "doesn't work".

edited Apr 26, 2016 at 21:43

answered Apr 19, 2016 at 20:13

Dan

3,07021 silver badges38 bronze badges

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

3 Comments

VP1456 Over a year ago

I would like to use one config for multiple charts, would it work?

Dan Over a year ago

jsfiddle.net/u40vs8hk - yes, though the chart data comes from the series property on the config, so if you can't set this dynamically (due to one time binding) you'd end up with the same chart twice. Hope that helps.

VP1456 Over a year ago

I'm ending up with the same chart.. i dont think it would work but thanks for help tho

Collectives™ on Stack Overflow

AngularJS one-way binding on custom directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related