修改

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的工作方式，它希望将配置作为范围内的对象。所以你应该在这里使用双向绑定

<强>指令

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指令定义中的@，&和=

指令不能替换模板中的变量：语法错误

1 个答案:

修改