使用 angular.js 时实例化 javascript widget/chart/utility 的合适位置在哪里？

Question

不出所料，我正在使用 chart.js 制作图表，并且我正在尝试弄清楚如何在 angular.js.

中清晰、正确地重写我的代码

香草实施

如果我只使用香草 javascript 和 html，我可能会做一些事情归结为：

<canvas id='chart'></canvas>
<script>
    data = {...} // dictionary of chart data, omitted for brevity
    options = {...} // dictionary of chart options, same^
    var ctx = document.getElementById("chart").getContext("2d");
    var chart = new Chart(ctx).Line(data, options);
</script>

首先会加载 canvas，然后脚本会运行并绘制图表。

Angular

但是有了 angular，我可以

<ng-chart></ng-chart>
<script>
    angular.module('app')
    .directive('ngChart', function(){
        return {
            restrict: 'E',
            template: '<canvas></canvas>'
            ...
        }
    )
</script>

并将第一个示例中的相同 javascript 放入指令中。

...

但是在哪里呢？

它似乎应该在 link 函数或控制器中。我需要先加载 DOM 元素，否则在 canvas 上绘制将不起作用——但这似乎并没有限制它。我还希望能够重新绘制图形，这样我最终就可以在不重新加载整个页面的情况下向 filter/rescale 图形添加功能。

Answer 1

下 link 属性.

<script>
    angular.module('app')
    .directive('ngChart', function(){
        return {
            restrict: 'E',
            link: function (scope, element, attrs, controllers) {
                //your plugin implementation here
                data = {...} // dictionary of chart data, omitted for brevity
                options = {...} // dictionary of chart options, same^
                var ctx = element.getContext("2d");
                var chart = new Chart(ctx).Line(data, options);
            }
            template: '<canvas></canvas>'

        }
    )
</script>

使用 angular.js 时实例化 javascript widget/chart/utility 的合适位置在哪里？

Where is the appropriate place to instantiate a javascript widget/chart/utility when using angular.js?

javascript

canvas

angularjs

chart.js

香草实施

Angular