使用angular.js时，实例化javascript小部件/图表/实用程序的适当位置在哪里？

Question

我使用chart.js制作图表，毫不奇怪，我试图找出如何在angular.js中干净利落地重写我的代码。

香草实施

如果我只是使用vanilla 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>

首先加载画布，然后脚本将运行并绘制图表。

角

但是对于角度，我可以使用

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

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

...

但是在哪里？

它似乎应该在链接功能或控制器中。我需要首先加载DOM元素，因为否则在画布上画画不会起作用 - 但这似乎并不限制它。我也希望能够重新绘制图形，这样我最终可以添加过滤/重新缩放图形的功能，而无需重新加载整个页面。

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>