javascript - 指令无法替换模板中的变量 : Syntax Error

Question

我创建了一个指令，其中包含一个指令，当我尝试为其提供参数时，我收到此消息:This error message

这是我的指令

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

加载此模板:

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

这是我的称呼:

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

我不知道我能做些什么来解决它，因为它对我来说看起来很好......

Answer 1

方式highcharts有效，它希望配置成为作用域中的对象。所以你应该在这里使用两种方式绑定(bind)

指令

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

指令使用

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

模板

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

编辑

参见this famous stackoverflow question and answer理解 angularjs 指令定义中的 @、& 和 =