Directive cannot replace variable in template: Syntax Error

Question

I created a directive which has a directive inside it, and when I try to give it parameters I get this message: This error message

Here is my directive

app.directive('percentageSquare', function(){
    return {
        restrict: 'E',
        scope: {
            color: '@',
            chartConfig: '@'
        },
        templateUrl: '/templates/dashboard/charts/PercentageChart.html'
    };
});

Which loads this template:

<div class="drop-shadow">
    <highchart id="{{chartConfig}}" config="{{chartConfig}}" style="background-color: {{color}};" ng-show="true"></highchart>
</div>

Here is how I am calling it:

<percentage-square color="yellow" chart-config="chartBounceRate"></percentage-square>

I am not sure what I can do to fix it, because it look just fine to me...

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

1

The way highcharts works, it want to have config to be an object from scope. so you should use two way binding here

Directive

scope: {
   color: '@',
   chartConfig: '=', //<--two way binding here
   selector: '@'
},

Directive Use

<percentage-square color="'yellow'" chart-config="chartBounceRate" selector="{{selector}}"></percentage-square>

Template

<div class="drop-shadow">
    <highchart id="{{selector}}" config="chartConfig" 
       ng-style="{background-color: color}" ng-show="true">
    </highchart>
</div>

EDIT

See this famous stackoverflow question and answer to understand @, & and = in angularjs directive definition

edited May 23 '17 at 11:51

Community

1
1

answered Jul 15 '15 at 18:28

Pankaj Parkar

134,766
23
234
299

That works! Do you have a link to the description of those binding types? I don't see them on the angular directives page here: https://docs.angularjs.org/guide/directive – Get Off My Lawn Jul 15 '15 at 18:36
@GetOffMyLawn its basically related to https://github.com/pablojim/highcharts-ng this directive API implementation.. – Pankaj Parkar Jul 15 '15 at 18:39
I mean for the different types of bindings, such as `@`, `=`, `&` I don't know what any of those mean and it isn't in the documentation link above. – Get Off My Lawn Jul 15 '15 at 18:41
1

@GetOffMyLawn, you can see this popular question and answer on sof to know more about &, = and @ : http://stackoverflow.com/q/14050195/3197383 – Rémi Becheras Jul 15 '15 at 18:45
Thanks that is perfect! – Get Off My Lawn Jul 15 '15 at 18:47

Directive cannot replace variable in template: Syntax Error

1 Answers1

EDIT