使用angular.js時，在何處實例化javascript小部件/圖表/實用程序？

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>

首先，將加載畫布，然后運行腳本並繪制圖表。

角度的

但是有了棱角，我可以擁有

<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>