如何在 Angular 的数据插件选项中设置值？

Question

我想知道如何设置控件的值，该控件使用数据插件选项来设置仪表控件的值。

我有这个 html 标记：

<div class="form-group" style="text-align: center;">
                    <div class="demo-label">Average Speed</div>
                    <div style="text-align: center;">
                        <div class="gauge-chart">
                            <canvas id="gaugeBasic" width="180" height="110" data-plugin-options='{ "value": 2150, "maxValue": 3000 }'></canvas>

                            <label id="gaugeBasicTextfield"></label>
                        </div>
                    </div>
                </div>

使用另一个不同的控件，即 Angular 指令，我可以像这样声明和设置我需要的值

<ridge-speedometer x-val="AverageSpeed"/>

现在我想使用上面的标记而不是那个控件，而当前 2150 的值在哪里，我想使用 AverageSpeed 值。

我该怎么做？

Answer 1

要使 AverageSpeed 在 UI 上可用，您需要将其附加到控制器或 $scope，如下所示：

$scope.AverageSpeed = 2150;

为了清洁起见，您真正应该做的是将该对象从 data-plugin-options 提取到您的控制器，如下所示：

$scope.options = {
    value: $scope.AverageSpeed,
    maxValue: 3000
}

然后将其插入您的 UI 中：

<canvas id="gaugeBasic" width="180" height="110" data-plugin-options="options"></canvas>

如何在 Angular 的数据插件选项中设置值？

How to set value in data-plugin-options from Angular?

javascript

html5-canvas

angularjs

angularjs-directive

angularjs-scope